/* Sistema de Gestão de Treinamento — Safety
   Cores e tipografia do brandbook (páginas 07–10). */

:root {
  --brand:        #C3161C;
  --brand-forte:  #9E0F16;
  --brand-claro:  #C3222A;
  --cinza:        #383838;

  /* paleta secundária — serve para os estados da turma e indicadores */
  --laranja: #FE5E08;
  --amarelo: #F2B826;
  --verde:   #42B662;
  --roxo:    #844685;
  --azul:    #0096FF;
  --marinho: #010066;
  --gelo:    #A6BFD0;
  --terra:   #763924;

  --fundo:        #F4F2F1;
  --fundo-cartao: #ffffff;
  --fundo-suave:  #FAF8F7;
  --texto:        #1C1A19;
  --texto-suave:  #6A6462;
  --borda:        #E4DFDD;
  --sombra:       none;

  --raio: 8px;
  --titulo: "Oswald", system-ui, sans-serif;
  --corpo: "Montserrat", system-ui, -apple-system, sans-serif;

  /* ---------------------------------------------- o sistema visual novo
     Três regras, aprovadas na proposta de layout:

     1. Cromo cinza. Barra, navegação, bordas e painéis não têm cor. O
        vermelho da marca fica para a marca e para o que está atrasado,
        e assim volta a significar alguma coisa.
     2. Uma superfície, não três. Um nível de cartão; o que separa por
        dentro é régua, não outra caixa.
     3. Densidade de ferramenta. Corpo 13, rótulo 12, micro 11, número
        tabular alinhado à direita. */

  --regua:       #F0ECEA;   /* régua interna, dentro do cartão */
  --tinta-fraca: #8A8482;   /* só decorativo ou texto grande */
  --controle:    #C9C3C0;   /* borda de controle e anel vazio */

  /* A cor do dado. Marinho do brandbook, clareado para passar contraste
     sobre branco; é ela que marca número e vínculo, não o vermelho. */
  --dado:      #1F3A6E;
  --dado-pale: #ECEFF5;

  /* O vermelho de texto: só para o que está atrasado ou travando alguém.
     É mais escuro que o --brand porque precisa passar 4.5:1 em 13px. */
  --tarde: #B3121A;

  /* As cores de área, escurecidas para servirem de TEXTO. O --azul puro
     do brandbook dava 2.9:1 sobre o fundo claro, abaixo do legível. */
  --marca-com: #0F5C8C;
  --marca-ped: #6B3A6C;
  --marca-fin: #763924;

  /* A coluna de conteúdo. Vale para a barra, as abas e o main, para os
     três alinharem na mesma margem. */
  --coluna: 1200px;

  /* Pares pálidos para selo e aviso: fundo claro com tinta escura da
     mesma matiz, em vez de fundo saturado com texto branco. */
  --ok-bg:    #DCF2E6;  --ok-ink:    #0B2A19;
  --aviso-bg: #FDF4E3;  --aviso-ink: #6B4A0C;
  --falha-bg: #FBE9E9;  --falha-ink: #5E0B0F;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --brand:        #EC2024;
    --brand-forte:  #C3161C;
    --fundo:        #1a1a1a;
    --fundo-cartao: #242424;
    --fundo-suave:  #2e2e2e;
    --texto:        #f2f2f2;
    --texto-suave:  #a0a0a0;
    --borda:        #3a3a3a;
    --sombra:       none;
    --regua:       #2b2b2b;
    --tinta-fraca: #8d8d8d;
    --controle:    #4a4a4a;
    --dado:        #8EA2FF;
    --dado-pale:   #1E2440;
    --tarde:       #EF8D92;
    --marca-com:  #4FB4FF;
    --marca-ped:  #C79BC8;
    --marca-fin: #CC8E6E;
    --ok-bg:    #15281D;  --ok-ink:    #5FC98D;
    --aviso-bg: #2A2112;  --aviso-ink: #E3BC6A;
    --falha-bg: #2C1618;  --falha-ink: #EF8D92;
  }
}

:root[data-tema="escuro"] {
  --brand:        #EC2024;
  --brand-forte:  #C3161C;
  --fundo:        #1a1a1a;
  --fundo-cartao: #242424;
  --fundo-suave:  #2e2e2e;
  --texto:        #f2f2f2;
  --texto-suave:  #a0a0a0;
  --borda:        #3a3a3a;
  --sombra:       none;
  --regua:       #2b2b2b;
  --tinta-fraca: #8d8d8d;
  --controle:    #4a4a4a;
  --dado:        #8EA2FF;
  --dado-pale:   #1E2440;
  --tarde:       #EF8D92;
  --marca-com:  #4FB4FF;
  --marca-ped:  #C79BC8;
  --marca-fin: #CC8E6E;
  --ok-bg:    #15281D;  --ok-ink:    #5FC98D;
  --aviso-bg: #2A2112;  --aviso-ink: #E3BC6A;
  --falha-bg: #2C1618;  --falha-ink: #EF8D92;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .numero {
  font-family: var(--titulo);
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0;
}

a { color: var(--dado); }

/* ------------------------------------------------------------- a marca
   O símbolo e o logotipo entram como máscara: a forma vem do PNG oficial,
   a cor vem do tema. Nunca redesenhar o símbolo à mão. */

.simbolo, .logotipo {
  background: var(--brand);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
}
.simbolo {
  -webkit-mask-image: url("../marca/safety-simbolo.png");
  mask-image: url("../marca/safety-simbolo.png");
  aspect-ratio: 256 / 185;
}
.logotipo {
  -webkit-mask-image: url("../marca/safety-logotipo.png");
  mask-image: url("../marca/safety-logotipo.png");
  aspect-ratio: 512 / 164;
}

/* ------------------------------------------------------------- entrada */

#login {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  /* Era min-height: 100vh. Com o rodapé no fim do corpo, a entrada estica
     até ele (flex: 1) em vez de ocupar a janela inteira e empurrar o rodapé
     para fora, o que criava uma barra de rolagem só para ele (05/11/2026). */
  flex: 1 0 auto;
  padding: 24px 16px;
}

/* O mosaico das quatro frentes: brigada, altura, espaço confinado e a
   equipe do escritório. No computador fica à esquerda do cartão, dois a
   dois; no telefone vira uma faixa de quatro em cima, para não empurrar
   o formulário para fora da tela. */
.mosaico-entrada {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 380px;
}
.mosaico-entrada img {
  display: block;
  width: 100%;
  height: auto; /* o atributo height do HTML valeria como altura fixa */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
}
@media (min-width: 900px) {
  #login {
    grid-template-columns: minmax(0, 560px) 380px;
    justify-content: center;
    gap: 48px;
  }
  .mosaico-entrada {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /* Cabe na altura da janela sem rolagem: duas fotos 3:4 mais o vão e
       o deslocamento. Em tela baixa o mosaico encolhe; o cartão não. */
    max-width: min(560px, calc((100vh - 82px) * 0.75));
    padding-bottom: 24px; /* o deslocamento da segunda coluna cabe aqui */
  }
  .mosaico-entrada img { border-radius: var(--raio); }
  /* A segunda coluna desce um pouco: o escalonamento tira o ar de
     tabela e deixa o conjunto com movimento. */
  .mosaico-entrada img:nth-child(even) { transform: translateY(24px); }
}
#login .cartao {
  width: 100%;
  max-width: 380px;
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 32px 28px;
}
#login .marca {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
#login .simbolo { width: 54px; }
#login .logotipo { width: 112px; }
#login h1 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  color: var(--texto-suave);
  font-weight: 500;
  margin: 18px 0 24px;
}

/* ---------------------------------------------------------- formulário */

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-suave);
  margin: 14px 0 5px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--dado);
  outline-offset: -1px;
  border-color: var(--dado);
}
input[type="checkbox"] { width: auto; }

button {
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--brand-forte); }
button:disabled { opacity: .55; cursor: default; }
button.vazio {
  background: transparent;
  color: var(--texto);
  border-color: var(--borda);
}
button.vazio:hover { background: var(--fundo-suave); }
button.risco { background: var(--cinza); }
button.largo { width: 100%; margin-top: 22px; }

.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- avisos */

.aviso {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid;
}
.aviso.erro   { background: #fdecec; border-color: #f3b9b9; color: #8c1118; }
.aviso.ok     { background: #eaf7ef; border-color: #b7e2c6; color: #1c6b36; }
.aviso.espera { background: #fff6e0; border-color: #f0ddab; color: #7a5a06; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .aviso.erro   { background: #3a1518; border-color: #6b2529; color: #f3b9b9; }
  :root:not([data-tema="claro"]) .aviso.ok     { background: #12301d; border-color: #255c38; color: #b7e2c6; }
  :root:not([data-tema="claro"]) .aviso.espera { background: #332a12; border-color: #5f4f1f; color: #f0ddab; }
}

/* --------------------------------------------------------------- barra */

/* A barra, as abas e o conteúdo partilham a mesma coluna de 1200px. O
   padding calculado centra o conteúdo sem precisar de div de casca: a
   borda atravessa a janela inteira, o conteúdo alinha com o main. */
.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 max(20px, calc((100% - var(--coluna)) / 2));
  height: 52px;
  background: var(--fundo-cartao);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}
.barra .simbolo { width: 26px; height: 19px; }
/* Nunca quebra em duas linhas numa barra de 56px: encolhe com reticência.
   No celular some, e o símbolo ao lado já identifica. */
/* O nome do sistema deixa de ser um segundo logotipo: vira legenda
   cinza ao lado da marca, que é quem identifica. */
.barra .nome {
  font-family: var(--corpo);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.barra .nome strong { font-weight: 500; }
.barra .empurra { margin-left: auto; }
.barra .quem { font-size: 12px; color: var(--texto-suave); }
.barra button { padding: 5px 10px; font-size: 12px; font-weight: 500; }
.barra button.vazio { border-color: transparent; color: var(--texto-suave); }
.barra button.vazio:hover { border-color: var(--borda); color: var(--texto); }

/* ------------------------------------------------------------- abas */

.abas {
  display: flex;
  gap: 4px;
  padding: 0 max(20px, calc((100% - var(--coluna)) / 2));
  background: var(--fundo-cartao);
  border-bottom: 1px solid var(--borda);
}
/* Caixa alta com espacejamento era o maior sinal de "modelo pronto" na
   tela. A aba agora é texto normal, e a ativa é marcada por tinta. */
.abas button {
  background: transparent;
  color: var(--texto-suave);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 2px;
  margin-right: 20px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.abas button:hover { background: transparent; color: var(--texto); }
.abas button[aria-selected="true"] {
  color: var(--texto);
  font-weight: 600;
  border-bottom-color: var(--texto);
}

/* ------------------------------------------------------------ conteúdo */

main { padding: 24px 20px 64px; max-width: 1200px; margin: 0 auto; }

.cabecalho-tela {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cabecalho-tela h2 { font-size: 24px; }
.cabecalho-tela .conta { color: var(--texto-suave); font-size: 13px; }
.explica { color: var(--texto-suave); font-size: 13px; margin: 0 0 18px; max-width: 70ch; }

.cartao {
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
  margin-bottom: 18px;
}

.grade {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* ------------------------------------------------------------- tabela */

/* A tabela é a mesma em todas as listas do sistema, porque todas passam
   pela função tabela() do núcleo. Linha de 52px, cabeçalho numa faixa
   cinza com rótulo pequeno, régua fina entre as linhas, e número sempre
   à direita com algarismo tabular — para a coluna alinhar de fato. */

.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  text-align: left;
  padding: 0 14px;
  height: 52px;
  border-bottom: 1px solid var(--regua);
  vertical-align: middle;
}
th {
  font-family: var(--corpo);
  font-size: 11px;
  height: 34px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-suave);
  font-weight: 400;
  white-space: nowrap;
  background: var(--fundo-suave);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr:hover { background: var(--fundo-suave); }
tbody tr:last-child td { border-bottom: 0; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.acoes { text-align: right; white-space: nowrap; }
td.acoes button { padding: 4px 9px; font-size: 12px; }

.vazio-tabela {
  padding: 28px 10px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 13px;
}

/* ------------------------------------------------------------ etiquetas */

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  white-space: nowrap;
}
.etiqueta.critico    { background: var(--brand); }
.etiqueta.medio      { background: var(--amarelo); color: #4a3703; }
.etiqueta.disponivel { background: var(--verde); }
.etiqueta.cinza      { background: var(--cinza); }
.etiqueta.pendente   { background: var(--laranja); }
.etiqueta.admin      { background: var(--marinho); }
.etiqueta.pedido     { background: var(--roxo); }
.etiqueta.vendas     { background: var(--azul); }

.pendencia {
  color: var(--tarde);
  font-weight: 600;
}

/* -------------------------------------------------------------- diálogo */

dialog {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-cartao);
  color: var(--texto);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h3 {
  font-size: 17px;
  padding: 18px 20px 0;
}
dialog .corpo { padding: 4px 20px 0; }
dialog .pe {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 20px;
  margin-top: 12px;
  border-top: 1px solid var(--borda);
}

/* ------------------------------------------------------------- celular */

@media (max-width: 640px) {
  main { padding: 16px; }
  .barra { padding: 0 16px; gap: 10px; }
  .barra .quem { display: none; }
  .abas { padding: 10px 16px 0; }
  table { font-size: 13px; }
}

/* ---------------------------------------------------------- carregando */

.carregando {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--borda);
  border-top-color: var(--dado);
  border-radius: 50%;
  animation: gira .7s linear infinite;
  vertical-align: -2px;
}
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .carregando { animation: none; }
}

/* ====================================================================
   Fase 2 — turma, trilha e agenda
   ==================================================================== */

/* ------------------------------------------------- cores por estado
   Da paleta secundária do brandbook. A ideia é que a cor diga de quem é
   a vez: azul e vermelho são do comercial, roxo e amarelo do pedagógico. */

.estado-sondagem               { background: var(--gelo); color: #22313a; }
.estado-vendida                { background: var(--azul); }
.estado-data_reservada         { background: var(--roxo); }
.estado-instrutor_definido     { background: var(--marinho); }
.estado-em_preparacao          { background: var(--amarelo); color: #4a3703; }
.estado-em_execucao            { background: var(--laranja); }
.estado-realizada              { background: var(--verde); }
.estado-evidencias_enviadas    { background: var(--brand); }
.estado-faturamento_solicitado { background: var(--terra); }
.estado-concluida              { background: var(--cinza); }
.estado-remarcada              { background: var(--amarelo); color: #4a3703; }
.estado-cancelada              { background: var(--gelo); color: #22313a; }

/* ------------------------------------------------------ cartão e dados */

.cabecalho-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cabecalho-cartao h3 { font-size: 15px; }

.grade-dados {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rotulo-dado {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
.valor-dado { font-size: 14px; margin-top: 2px; }

/* ---------------------------------------------------------- assinatura
   Quem fez e quando, no registro de execução. */

.assinatura { font-size: 12px; color: var(--texto-suave); }
.assinatura strong { color: var(--texto); font-weight: 600; }
.assinatura-item { margin: 2px 0 0 26px; }

/* ----------------------------------------------------------- checklist */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 7px 0; border-bottom: 1px solid var(--borda); }
.checklist li:last-child { border-bottom: none; }
.checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--texto);
  cursor: pointer;
}
.checklist .feito { color: var(--texto-suave); text-decoration: line-through; }
/* Quantidade (Manequins, Bolsa): logo abaixo do nome, alinhada ao texto. */
.checklist label.qtd-item {
  margin: 6px 0 0 28px;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-suave);
  cursor: default;
}
.checklist label.qtd-item input { width: 88px; min-height: 36px; padding: 4px 8px; font-size: 15px; }

/* ----------------------------------------------------------- calendário */

.calendario-cabeca, .calendario {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.calendario-cabeca {
  margin-bottom: 4px;
  font-family: var(--titulo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
.calendario-cabeca span { padding: 4px 6px; }

.dia {
  min-height: 92px;
  padding: 5px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--fundo);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dia.fora { background: transparent; border-color: transparent; }
.dia.hoje { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.numero-dia { font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.marca {
  display: block;
  width: 100%;
  text-align: left;
  padding: 3px 6px;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
}
.marca:hover { filter: brightness(1.08); background: inherit; }
.marca-titulo { display: block; font-weight: 700; }
.marca-sub {
  display: block;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--texto-suave);
}
.legenda-item { display: inline-flex; align-items: center; gap: 5px; }
.ponto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

@media (max-width: 640px) {
  /* Sete colunas de 92px não cabem num telefone: o mês vira rolagem
     horizontal em vez de virar sete colunas ilegíveis. */
  .calendario-cabeca, .calendario { min-width: 560px; }
  .cartao:has(.calendario) { overflow-x: auto; }
  .dia { min-height: 76px; }
}

/* ====================================================================
   Fase 3 — despesas e margem
   ==================================================================== */

.numero-grande { margin-bottom: 0; }
.numero-grande .numero {
  font-family: var(--titulo);
  font-size: 26px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.numero-grande .numero.destaque { color: var(--dado); }

.soma-despesas {
  text-align: right;
  padding: 12px 10px 0;
  font-size: 14px;
  color: var(--texto-suave);
  border-top: 2px solid var(--borda);
  margin-top: -1px;
}
.soma-despesas strong {
  color: var(--texto);
  font-family: var(--titulo);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* As observações das linhas automáticas explicam de onde veio a conta
   ("120 km x 2, fora da ilha"). Ficam fora da tabela para não espremer
   as colunas de número, que são o que se lê primeiro. */
.notas-despesa {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--texto-suave);
}
.notas-despesa li { margin-bottom: 4px; }
.notas-despesa strong { color: var(--texto); }

/* ====================================================================
   Fase 4 — página do aluno, desvios e qualidade
   ==================================================================== */

/* A página do aluno é sempre clara: ela vai num celular qualquer, muitas
   vezes sob luz forte no cliente, e não é lugar de tema. */

.pagina-aluno { background: var(--fundo); }
.folha {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}
.marca-aluno {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.marca-aluno .simbolo { width: 44px; }
.marca-aluno .logotipo { width: 96px; }

.folha h1 { font-size: 21px; margin-bottom: 4px; }
.folha textarea { margin-bottom: 4px; }

.destaque-anonimo {
  background: var(--fundo-suave);
  border-left: 3px solid var(--verde);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  margin: 18px 0 26px;
}

fieldset {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-cartao);
  padding: 14px 16px 16px;
  margin: 0 0 14px;
}
legend {
  font-family: var(--titulo);
  font-size: 15px;
  padding: 0 6px;
}

.opcoes { display: grid; gap: 6px; }
.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  color: var(--texto);
}
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.bolha {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--fundo-suave);
  font-family: var(--titulo);
  font-size: 14px;
}
.opcao:has(input:checked) {
  border-color: var(--brand);
  background: var(--fundo-suave);
}
.opcao:has(input:checked) .bolha { background: var(--brand); color: #fff; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.bloco-nps legend { line-height: 1.35; }
.escala {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}
.nota-nps { margin: 0; cursor: pointer; }
.nota-nps input { position: absolute; opacity: 0; width: 0; height: 0; }
.nota-nps span {
  display: grid;
  place-items: center;
  padding: 9px 0;
  border: 1px solid var(--borda);
  border-radius: 7px;
  font-family: var(--titulo);
  font-size: 14px;
  background: var(--fundo);
}
.nota-nps:has(input:checked) span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.nota-nps:has(input:focus-visible) span { outline: 2px solid var(--brand); outline-offset: 2px; }

.escala-pontas {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--texto-suave);
  margin-top: 6px;
}

.selo-ok {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 10px auto 18px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 32px;
}

@media (max-width: 420px) {
  /* Onze colunas não cabem: vira duas linhas de números legíveis. */
  .escala { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------------- desvios e qualidade */

.etiqueta.baixa { background: var(--gelo); color: #22313a; }
.etiqueta.media { background: var(--amarelo); color: #4a3703; }
.etiqueta.alta  { background: var(--brand); }

.etiqueta.resolvido { background: var(--verde); }
.etiqueta.aberto    { background: var(--laranja); }

.link-avaliacao {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.link-avaliacao input {
  flex: 1 1 260px;
  font-size: 12px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.barra-nota {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--fundo-suave);
  overflow: hidden;
  margin-top: 4px;
}
.barra-nota span { display: block; height: 100%; background: var(--dado); }

/* ====================================================================
   Tabulação e QR Code
   ==================================================================== */

.grade-tabulacao {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* As dez notas em grade: o olho percorre de uma vez e o TAB segue a
   ordem de leitura, que é como a pessoa tem o papel na frente. */
.notas-grade {
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 18px 0 8px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
}

.campo-nota { display: flex; align-items: center; gap: 10px; }
.campo-nota label {
  flex: 1;
  margin: 0;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--texto);
}
.campo-nota input {
  width: 62px;
  flex: none;
  margin: 0;
  text-align: center;
  font-family: var(--titulo);
  font-size: 17px;
}

/* Campo que a leitura por foto marcou como duvidoso. O vermelho não é
   erro: é "olhe aqui antes de salvar". */
.campo-nota.duvida input {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.marca-duvida {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand);
}

.caixa-qr {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: #fff;
  text-align: center;
}
.caixa-qr img {
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

/* Link que precisa parecer botão (baixar o QR). */
.botao-vazio {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-family: var(--titulo);
  font-size: 13px;
  color: var(--texto);
  text-decoration: none;
}
.botao-vazio:hover { border-color: var(--controle); color: var(--controle); }

/* Duas colunas que viram uma no telefone — usado em "positivos" e
   "oportunidades", que só fazem sentido lado a lado. */
.duas-colunas {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* -------------------------------------------- lista de negócios do RD */

.lista-negocios {
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 10px;
}
.negocio {
  display: grid;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  cursor: pointer;
}
.negocio:hover { border-color: var(--controle); background: var(--fundo-suave); }
.negocio-nome { font-weight: 600; font-size: 13px; }
.negocio-info { font-size: 12px; color: var(--texto-suave); }

/* ---------------------------------------------- ponto colorido do score
   O <select> não aceita cor por opção em todo navegador, e a cor é o que
   se lê de relance. Então ela fica ao lado. */

.score-linha { display: inline-flex; align-items: center; gap: 8px; }
.ponto-score {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, .15);
}
.ponto-score.critico    { background: var(--brand); }
.ponto-score.medio      { background: var(--amarelo); }
.ponto-score.disponivel { background: var(--verde); }
.ponto-score.vazio      { background: var(--borda); }

/* ====================================================================
   Tela inicial — as duas áreas lado a lado
   ==================================================================== */

.dois-lados {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
}

.lado {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-cartao);
  padding: 18px;
}
/* Cada lado leva um marcador de 3px na cor da ÁREA, não da marca: era o
   vermelho em volta de tudo que fazia a tela parecer em alarme.
   O seu lado ganha um fundo um passo fora do branco. O outro continua
   legível: esconder o lado do outro é o problema que este sistema veio
   resolver. */
.lado-comercial  { border-left: 3px solid var(--marca-com); }
.lado-pedagogico { border-left: 3px solid var(--marca-ped); }
.lado.meu { background: var(--fundo-suave); }

.lado-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.lado-cabeca h3 { font-size: 17px; }

.etiqueta.roxo { background: var(--roxo); }

.pendencias { display: grid; gap: 8px; margin: 14px 0; }

.pendencia-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  cursor: pointer;
}
.pendencia-item:hover { border-color: var(--controle); background: var(--fundo-suave); }

.pendencia-numero {
  flex: none;
  min-width: 30px;
  text-align: center;
  font-family: var(--titulo);
  font-size: 20px;
  line-height: 1.15;
  color: var(--dado);
  font-variant-numeric: tabular-nums;
}
.pendencia-item:not(.grave) .pendencia-numero { color: var(--texto-suave); }

.pendencia-texto { display: grid; gap: 1px; font-size: 13px; }
.pendencia-texto strong { font-size: 13px; }
.pendencia-texto span { color: var(--texto-suave); font-size: 12px; }

.atalhos { flex-wrap: wrap; gap: 6px; }
.atalhos button { font-size: 12px; padding: 6px 10px; }

/* ------------------------------------------------------ primeiros passos */

.lista-passos { list-style: none; margin: 12px 0 0; padding: 0; }
.lista-passos li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 14px;
}
.lista-passos li:last-child { border-bottom: none; }
/* Marcador desenhado, não glifo: anel vazio quando falta, ponto cheio
   quando está feito. */
.lista-passos li::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--controle);
}
.lista-passos li.feito { color: var(--texto-suave); }
.lista-passos li.feito::before { background: var(--verde); border-color: var(--verde); }

/* -------------------------------------------------- matriz de permissões */

.rolagem-lateral { overflow-x: auto; }

.matriz { width: 100%; border-collapse: collapse; font-size: 13px; }
.matriz th, .matriz td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.matriz thead th {
  font-family: var(--titulo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  border-bottom: 2px solid var(--borda);
}
.matriz td:first-child, .matriz thead th:first-child { white-space: normal; min-width: 230px; }

.matriz tr.grupo th {
  padding-top: 16px;
  font-family: var(--titulo);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
}

/* A sua coluna fica marcada: numa matriz larga, achar a própria é metade
   do trabalho de ler. */
.matriz .meu-papel { background: var(--fundo-suave); }
.matriz thead th.meu-papel { color: var(--dado); }

/* ------------------------------------------------- barra de abas em grupos
   Quatorze abas em fileira única viram uma lista aleatória: o trabalho do
   dia no meio de cadastro e administração. Em grupos, cada coisa tem um
   lugar previsível. */

.abas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.grupo-abas {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-right: 10px;
  border-right: 1px solid var(--borda);
}
.grupo-abas:last-child { border-right: none; padding-right: 0; }

.rotulo-grupo {
  font-family: var(--titulo);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
  padding: 0 4px 0 0;
}


/* Nota explicativa dentro da matriz de permissões: a regra em si é a
   linha; a nota é o porquê, para quem for mexer nela depois. */
.nota-acao {
  display: block;
  font-size: 11px;
  color: var(--texto-suave);
  margin-top: 3px;
  white-space: normal;
  max-width: 420px;
}

/* ------------------------------------------------- faixa do financeiro
   Faixa, não terceira coluna: pela descrição do usuário o financeiro não é
   um terceiro lado — é quem sustenta os outros dois. */

.faixa-financeiro {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--borda);
  border-top: 3px solid var(--terra);
  border-radius: var(--raio);
  background: var(--fundo-cartao);
}

.etiqueta.terra { background: var(--terra); }

.focos {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 14px 0;
}

.foco {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
}
/* Acende só quando há algo esperando. Ponto focal que está sempre aceso
   deixa de ser ponto focal. */
.foco.acende { border-left: 3px solid var(--terra); }

.foco-numero {
  flex: none;
  min-width: 28px;
  text-align: center;
  font-family: var(--titulo);
  font-size: 20px;
  line-height: 1.15;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.foco.acende .foco-numero { color: var(--terra); }

.foco-texto { display: grid; gap: 1px; font-size: 13px; }
.foco-texto strong { font-size: 13px; }
.foco-texto span { color: var(--texto-suave); font-size: 12px; }

/* Despesa solicitada e já atrasada usa a mesma cor de gravidade alta do
   desvio: é a mesma ideia de "isto já passou do ponto". */
.etiqueta.alta { background: var(--brand); }

/* ====================================================================
   Barra de abas em duas linhas, organizada por área
   ====================================================================
   Em cima o trabalho de todo dia; embaixo o que é de cada setor, com cor
   discreta para a pessoa achar o próprio canto de relance. A cor marca o
   rótulo e a aba selecionada — não pinta fundo, que viraria barulho numa
   barra que está sempre na tela. */

.abas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 max(20px, calc((100% - var(--coluna)) / 2));
  overflow-x: visible;
}

.linha-abas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 22px;
}

/* Linha 1: o trabalho de todo dia, e a única com sublinhado de tinta. */
.linha-abas.linha-1 {
  height: 40px;
  align-items: flex-end;
  gap: 0 24px;
}
.linha-abas.linha-1 button {
  font-size: 13px;
  padding: 0 2px 10px;
  margin-right: 0;
}

/* Linha 2: as áreas. Mais quieta, sem sublinhado, para a de cima
   continuar sendo a principal. */
.linha-abas.linha-2 {
  padding: 8px 0;
  border-top: 1px solid var(--regua);
  gap: 6px 22px;
}
.linha-abas.linha-2 button {
  font-size: 12px;
  padding: 0 2px;
  margin-right: 0;
  letter-spacing: 0;
  border-bottom: 0;
}
.linha-abas.linha-2 button[aria-selected="true"] {
  border-bottom: 0;
  color: var(--texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O marcador de 3px na cor da área. Desenhado com pseudo-elemento, para
   a cor por setor não exigir mais um span no HTML. */
.grupo-abas {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  position: relative;
  padding-left: 11px;
}
.grupo-abas::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: currentColor;
}
.area-comercial  { color: var(--marca-com); }
.area-pedagogico { color: var(--marca-ped); }
.area-financeiro { color: var(--marca-fin); }
.area-sistema    { color: var(--controle); }

/* O rótulo da área é cinza, não colorido: quem dá a cor é o marcador.
   Antes ele era 9px em caixa alta, abaixo do tamanho legível. */
.rotulo-grupo,
.linha-abas.linha-2 .rotulo-grupo {
  font-family: var(--corpo);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-suave);
  padding: 0;
}

@media (max-width: 760px) {
  .abas { padding: 0 16px; }
  /* No telefone cada linha rola com o dedo, em vez de empilhar um grupo
     por linha e somar cinco linhas antes de qualquer conteúdo. */
  .linha-abas {
    flex-wrap: nowrap;
    /* Sem isto a linha se recusa a encolher abaixo do conteudo e empurra
       a barra inteira para 1232px, rolando a pagina de lado. */
    min-width: 0;
    /* O max-width e o que de fato segura: sem ele a linha estica ate a
       largura do conteudo e rola a pagina inteira de lado. Medido. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .linha-abas::-webkit-scrollbar { display: none; }
  .linha-abas button { white-space: nowrap; }
  .grupo-abas { flex: none; flex-wrap: nowrap; }
}

/* ====================================================================
   Marca do calendário — três informações e nada mais
   ====================================================================
   O usuário foi explícito: no calendário basta o que está marcado, onde
   acontece, e a disponibilidade de instrutor daquele treinamento. Cliente,
   estado e nome do instrutor saíram da célula e ficaram no título que
   aparece ao passar o mouse. Célula de calendário com informação demais
   ninguém lê.
   A cor da marca era o estado da turma; agora a cor que importa é o ponto
   do score. Por isso a marca ficou neutra. */

.marca {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 4px 5px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo-cartao);
  color: var(--texto);
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}
.marca:hover {
  border-color: var(--controle);
  background: var(--fundo-suave);
  filter: none;
}

.marca .ponto-score {
  width: 9px;
  height: 9px;
  border-width: 0;
}

.marca-titulo {
  display: block;
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Onde acontece, numa letra: S de Safety, C de cliente, O de outro. */
.marca-local {
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  font-family: var(--titulo);
  font-size: 9.5px;
  line-height: 1;
  color: #fff;
}
.local-safety  { background: var(--marinho); }
.local-cliente { background: var(--azul); }
.local-outro   { background: var(--cinza); }

.legenda .ponto-score { width: 10px; height: 10px; border-width: 0; }
.legenda .marca-local { width: 16px; height: 16px; }

/* Treinamento sem norma tem nome longo ("Primeiros Socorros") e cortado em
   uma linha vira "Pri…", que não informa nada. Duas linhas custam alguns
   pixels de altura e devolvem a informação. */
.marca-titulo {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
}
.marca { align-items: flex-start; }
.marca .ponto-score, .marca .marca-local { margin-top: 1px; }

/* ====================================================================
   Assinatura da marca na barra
   ====================================================================
   O brandbook pede símbolo E logotipo juntos, com área de proteção
   generosa. Até agora a barra tinha só o símbolo — a palavra "safety" não
   aparecia em lugar nenhum do sistema.
   A hierarquia também estava errada: o nome do sistema vinha no mesmo
   peso da marca. A marca é da empresa; o nome é do sistema, e é
   subordinado a ela. Por isso o fio separando e o peso menor. */

.barra { height: 60px; gap: 12px; }

.marca-barra {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-decoration: none;
  /* A área de proteção que o manual exige. */
  padding: 4px 6px 4px 0;
}
.marca-barra .simbolo  { height: 21px; width: auto; }
.marca-barra .logotipo { height: 15px; width: auto; }
.marca-barra:hover { opacity: .85; }

.fio-marca {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--borda);
}

.barra .nome {
  font-family: var(--titulo);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .02em;
  color: var(--texto-suave);
}

/* Botão que é só ícone: quadrado, com o desenho centrado. */
.so-icone {
  display: grid;
  place-items: center;
  padding: 7px;
  line-height: 0;
}
.so-icone svg { display: block; }

/* ------------------------------------------------------- janela da busca */

.janela-busca { width: min(620px, calc(100vw - 32px)); }
.janela-busca input { margin-bottom: 4px; }

.resultados-busca {
  display: grid;
  gap: 4px;
  max-height: 52vh;
  overflow-y: auto;
  margin-top: 8px;
}

.resultado {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  cursor: pointer;
}
.resultado:hover { border-color: var(--controle); background: var(--fundo-suave); }

.resultado-titulo { font-weight: 600; font-size: 13px; }
.resultado-treino { color: var(--texto-suave); font-weight: 400; }
.resultado-info { font-size: 12px; color: var(--texto-suave); }

@media (max-width: 640px) {
  /* No telefone o nome do sistema sai: a assinatura já identifica, e a
     barra precisa do espaço para os botões. */
  .barra .nome, .fio-marca { display: none; }
}

/* Nada na barra pode quebrar em duas linhas: numa barra de 60px isso
   parece defeito, não aperto. O que não couber some por ordem de
   importância — primeiro o nome do sistema, depois quem está logado. */
.barra button, .barra .quem { white-space: nowrap; }
.barra .nome { min-width: 0; }

@media (max-width: 1000px) {
  .barra .quem { display: none; }
}

/* ------------------------------------- cor da marca do calendário por local
   O usuário quer distinguir de relance onde o treinamento acontece. A letra
   sozinha exige leitura; a borda colorida se lê varrendo o mês com o olho.
   A letra continua, porque cor sozinha não serve para quem não distingue
   as duas — e porque "S", "C" e "O" dizem o que a cor só sugere. */

.marca { border-left-width: 3px; }
.marca.no-safety  { border-left-color: var(--marinho); }
.marca.no-cliente { border-left-color: var(--azul); }
.marca.em-outro   { border-left-color: var(--cinza); }

/* ------------------------------------------------- o que você faz aqui
   A segunda parte de cada lado da tela inicial. A primeira diz o que
   está esperando por você hoje; esta diz o que a área faz, sempre.

   A ação que ainda não cabe continua na tela, apagada, dizendo o que
   falta. É o conserto do problema que apareceu com a avaliação de
   reação: três caminhos até ela, todos dependentes de turma executada,
   e nenhuma turma executada no sistema — então os três sumiam, e a
   função parecia não existir. */

.faz-aqui {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.faz-aqui h4 {
  font-family: var(--titulo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
  margin: 0 0 10px;
}

.acoes-area { display: grid; gap: 6px; }

.acao-item {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.acao-item strong { font-size: 13px; }
.acao-item span { font-size: 12px; color: var(--texto-suave); }

.acao-item:hover { border-color: var(--controle); background: var(--fundo-suave); }
.acao-item:focus-visible { outline: 2px solid var(--dado); outline-offset: 2px; }

/* Quando ainda não cabe: fica, apagada, e diz o que falta. Borda
   tracejada para a diferença não depender só de cor. */
.acao-item.indisponivel {
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.acao-item.indisponivel strong { color: var(--texto-suave); font-weight: 600; }
.acao-item.indisponivel:hover { border-color: var(--borda); background: transparent; }

/* ==================================================================
   TELA INICIAL — a proposta aprovada em 19/10/2026
   ==================================================================
   A saudação carrega o fato do dia tirado dos dados, os quatro números
   ficam num painel só dividido por régua, e o trilho da turma é o
   elemento que só este sistema tem. */

/* ------------------------------------------------------- a saudação */

.saudacao { margin-bottom: 20px; }
.saudacao h2 {
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 5px;
}
/* O fato do dia vem dos dados e muda conforme o papel de quem entra.
   É a primeira coisa que se lê, antes de qualquer número. */
.fato-do-dia {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--texto-suave);
  max-width: 60ch;
}
.data-de-hoje {
  margin: 0;
  font-size: 11px;
  color: var(--tinta-fraca);
}

/* ------------------------------------------- os quatro números do mês
   Um painel dividido por régua, não quatro caixas. */

.figuras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  margin-bottom: 16px;
}
.figura {
  padding: 15px 18px;
  border-left: 1px solid var(--regua);
  min-width: 0;
}
.figura:first-child { border-left: 0; }
.figura-rotulo {
  display: block;
  font-size: 11px;
  color: var(--texto-suave);
  margin-bottom: 7px;
}
/* Peso normal e algarismo tabular: aqui o número é informação, não
   troféu, e precisa alinhar com o de cima e o de baixo. */
.figura-valor {
  display: block;
  font-family: var(--titulo);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Dinheiro tem medida própria: "R$ 126.480,00" a 28px estoura a coluna. */
.figura-valor.dinheiro { font-size: 21px; letter-spacing: -0.01em; white-space: nowrap; }
.figura-legenda {
  display: block;
  font-size: 11px;
  color: var(--texto-suave);
  margin-top: 7px;
}

/* -------------------------------------------------------- o trilho */

.painel-trilho { padding: 16px 18px 12px; }
.painel-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.painel-cabeca h3 { font-size: 13px; font-weight: 600; font-family: var(--corpo); }
.painel-nota {
  font-size: 11px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.trilho {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}
.etapa {
  display: grid;
  grid-template-rows: auto 22px auto;
  justify-items: center;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.etapa-meio {
  position: relative;
  width: 100%;
  height: 22px;
  display: grid;
  place-items: center;
}
/* O fio. Avança 5px para cada lado para cobrir a medianiz de 6px e os
   segmentos virarem uma linha só; as pontas param no primeiro e no
   último ponto, porque o trilho começa e termina ali. */
.etapa-meio::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: 50%;
  height: 1px;
  background: var(--borda);
}
.etapa:first-child .etapa-meio::before { left: 50%; }
.etapa:last-child  .etapa-meio::before { right: 50%; }
.etapa-ponto {
  position: relative;
  width: var(--d, 9px);
  height: var(--d, 9px);
  border-radius: 50%;
  background: var(--fundo-cartao);
  box-shadow: inset 0 0 0 1.5px var(--controle); /* taste-skill-ignore: anel interno, não sombra */
}
/* A cor do ponto diz de quem é a vez de mover a turma dali. */
.etapa.tem .etapa-ponto { box-shadow: none; background: var(--dado); }
.etapa.area-comercial.tem  .etapa-ponto { background: var(--marca-com); }
.etapa.area-pedagogico.tem .etapa-ponto { background: var(--marca-ped); }
.etapa.area-financeiro.tem .etapa-ponto { background: var(--marca-fin); }
.etapa-num {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.etapa.tem .etapa-num { color: var(--texto); }
.etapa-nome {
  font-size: 11px;
  line-height: 1.25;
  color: var(--texto-suave);
  text-align: center;
  word-break: break-word;
}

.trilho-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 20px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--regua);
  font-size: 11px;
  color: var(--texto-suave);
}
/* A bolinha da legenda herda a cor da área pela classe. */
.trilho-legenda span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.trilho-legenda span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.trilho-legenda .area-ambas { color: var(--dado); }
.trilho-legenda span { color: var(--texto-suave); }
.trilho-legenda .area-comercial::before  { background: var(--marca-com); }
.trilho-legenda .area-pedagogico::before { background: var(--marca-ped); }
.trilho-legenda .area-ambas::before      { background: var(--dado); }
.trilho-legenda .area-financeiro::before { background: var(--marca-fin); }

/* ------------------------------------------------ cabeça de cada lado */

.selo-conta {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--dado-pale);
  color: var(--dado);
  border-radius: 4px;
  padding: 1px 6px;
}
/* "o seu lado": o estilo definitivo está no fim do arquivo, depois das
   regras de contraste dos painéis, que senão o sobrepõem. */
.seu-lado {
  margin-left: auto;
  font-size: 11px;
  color: var(--texto-suave);
}
.lado-cabeca { justify-content: flex-start; gap: 9px; }
.lado-cabeca h3,
.faixa-financeiro .lado-cabeca h3 {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--corpo);
}

/* -------------------------------------------------- as pendências */

/* Vermelho só no que está travando alguém; o resto é a cor do dado. */
.pendencia-item.grave .pendencia-numero { color: var(--tarde); }
.pendencia-item { border-radius: 6px; }
.lado.meu .pendencia-item { background: var(--fundo-cartao); }

/* ---------------------------------------------- a faixa do financeiro */

.faixa-financeiro {
  border-top: 1px solid var(--borda);
  border-left: 3px solid var(--marca-fin);
}
.faixa-financeiro .foco { border-radius: 6px; }
.foco.acende { border-left: 3px solid var(--marca-fin); }
.foco-numero { color: var(--texto-suave); }
.foco.acende .foco-numero { color: var(--marca-fin); }

/* ------------------------------------------------------ celular */

@media (max-width: 760px) {
  .saudacao h2 { font-size: 22px; }
  .fato-do-dia { font-size: 13px; }
  .figuras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figura { border-left: 0; border-top: 1px solid var(--regua); }
  .figura:nth-child(odd) { border-right: 1px solid var(--regua); }
  .figura:nth-child(1), .figura:nth-child(2) { border-top: 0; }
  .figura-valor { font-size: 24px; }
  .figura-valor.dinheiro { font-size: 17px; }

  /* Nove etapas não cabem legíveis em 390px: o trilho rola com o dedo,
     e o esmaecimento na borda avisa que há mais para o lado. */
  .trilho {
    grid-template-columns: repeat(9, 64px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%); /* taste-skill-ignore: máscara de rolagem, não preenchimento */
    mask-image: linear-gradient(to right, #000 86%, transparent 100%); /* taste-skill-ignore: máscara de rolagem, não preenchimento */
  }
  .trilho::-webkit-scrollbar { display: none; }
}

/* ==================================================================
   ETIQUETAS — chip pálido com ponto, no lugar de dez cores saturadas
   ==================================================================
   O estado da turma usava dez matizes cheias com texto branco. Numa
   lista de vinte linhas isso vira arco-íris, e nenhuma cor significa
   nada. Agora o chip é sempre o mesmo, e o que muda é o PONTO: ele diz
   de quem é a vez de mover a turma dali. A mesma leitura do trilho da
   tela inicial, repetida aqui.

   Severidade continua tendo cor própria — crítico, médio, disponível —
   mas em par pálido: fundo claro com tinta escura da mesma matiz. */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  color: var(--texto);
  white-space: nowrap;
}

/* Severidade e disponibilidade: par pálido, não fundo saturado. */
.etiqueta.critico    { background: var(--falha-bg); border-color: transparent; color: var(--falha-ink); }
.etiqueta.alta       { background: var(--falha-bg); border-color: transparent; color: var(--falha-ink); }
.etiqueta.medio      { background: var(--aviso-bg); border-color: transparent; color: var(--aviso-ink); }
.etiqueta.pendente   { background: var(--aviso-bg); border-color: transparent; color: var(--aviso-ink); }
.etiqueta.disponivel { background: var(--ok-bg);    border-color: transparent; color: var(--ok-ink); }
.etiqueta.cinza      { background: var(--fundo-suave); color: var(--texto-suave); }
.etiqueta.admin,
.etiqueta.pedido,
.etiqueta.vendas     { background: var(--dado-pale); border-color: transparent; color: var(--dado); }

/* Os estados da turma: mesmo chip, e o ponto marca de quem é a vez. */
.etiqueta[class*="estado-"] {
  background: var(--fundo-suave);
  border-color: var(--borda);
  color: var(--texto);
}
.etiqueta[class*="estado-"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--controle);
}
.etiqueta.estado-vendida::before,
.etiqueta.estado-faturamento_solicitado::before { background: var(--marca-com); }
.etiqueta.estado-data_reservada::before         { background: var(--dado); }
.etiqueta.estado-instrutor_definido::before,
.etiqueta.estado-em_preparacao::before,
.etiqueta.estado-em_execucao::before,
.etiqueta.estado-realizada::before,
.etiqueta.estado-evidencias_enviadas::before    { background: var(--marca-ped); }
.etiqueta.estado-concluida::before              { background: var(--marca-fin); }
.etiqueta.estado-remarcada::before              { background: var(--aviso-ink); }
.etiqueta.estado-cancelada::before,
.etiqueta.estado-sondagem::before               { background: var(--controle); }
.etiqueta.estado-cancelada,
.etiqueta.estado-sondagem { color: var(--texto-suave); }

/* ------------------------------------------------------------ avisos
   Os avisos usavam seis cores cravadas no arquivo, uma por tema. Agora
   saem dos mesmos pares pálidos, e o tema escuro vem junto de graça. */

.aviso.erro   { background: var(--falha-bg); border-color: transparent; color: var(--falha-ink); }
.aviso.ok     { background: var(--ok-bg);    border-color: transparent; color: var(--ok-ink); }
.aviso.espera { background: var(--aviso-bg); border-color: transparent; color: var(--aviso-ink); }

/* ------------------------------------------------- a barra no telefone
   Medido: em 390px a barra pedia bem mais do que cabia e empurrava
   "Sair" para fora da tela. Em vez de esconder botao, ela ganha duas
   linhas: a marca em cima, os controles embaixo. Nada some. */
@media (max-width: 760px) {
  .barra {
    height: auto;
    padding: 7px 16px;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 8px;
  }
  .barra .empurra { flex-basis: 100%; height: 0; margin: 0; }
  .barra .nome, .barra .fio-marca { display: none; }
  .barra .quem { order: 1; }
  main { padding: 20px 16px 56px; }
}

/* ------------------------------------------------- seções que recolhem
   A tela da turma era uma rolagem única com onze seções. Agora cada
   cartão com título vira uma seção que abre, e a da vez já nasce aberta
   conforme o estado da turma. */

details.secao > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
details.secao > summary::-webkit-details-marker { display: none; }
/* A seta é desenhada, não é glifo: gira ao abrir. */
details.secao > summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid var(--tinta-fraca);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .12s ease;
}
details.secao[open] > summary::before { transform: rotate(90deg); }
details.secao[open] > summary { margin-bottom: 14px; }
details.secao > summary:hover { color: var(--dado); }
details.secao > summary:focus-visible { outline: 2px solid var(--dado); outline-offset: 3px; }

/* ==================================================================
   CADA PAINEL COM A SUA FAIXA DE COR
   ==================================================================
   Pedido do usuário em 20/10/2026: o fio de 3px na borda não bastava
   para separar as áreas de relance. Agora cada painel é um CAMPO na
   matiz da área, em tom claro, com o título na tinta escura da mesma
   matiz. A cor cheia continua aparecendo só em marca pequena: o ponto
   do trilho, o selo de contagem e o número da fila.

   Os tons claros foram escolhidos para o texto normal continuar
   passando 4.5:1 em cima deles. */

:root {
  --com-campo: #E1EFFA;  --com-borda: #BCDCF4;  --com-tinta: #084F80;
  --ped-campo: #F0E5F1;  --ped-borda: #DDC5DE;  --ped-tinta: #6B3A6C;
  --fin-campo: #F5E8DF;  --fin-borda: #E4CDBB;  --fin-tinta: #6B321F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
      --com-campo: #11202C;  --com-borda: #1D3A4E;  --com-tinta: #7FC3F0;
    --ped-campo: #241A24;  --ped-borda: #3C2C3C;  --ped-tinta: #C79BC8;
    --fin-campo: #241A14;  --fin-borda: #3C2C22;  --fin-tinta: #D8A184;
  }
}
:root[data-tema="escuro"] {
  --com-campo: #11202C;  --com-borda: #1D3A4E;  --com-tinta: #7FC3F0;
  --ped-campo: #241A24;  --ped-borda: #3C2C3C;  --ped-tinta: #C79BC8;
  --fin-campo: #241A14;  --fin-borda: #3C2C22;  --fin-tinta: #D8A184;
}

/* ---- o campo de cada área */

.lado-comercial {
  background: var(--com-campo);
  border-color: var(--com-borda);
  border-left-color: var(--marca-com);
}
.lado-comercial .lado-cabeca h3 { color: var(--com-tinta); }

.lado-pedagogico {
  background: var(--ped-campo);
  border-color: var(--ped-borda);
  border-left-color: var(--marca-ped);
}
.lado-pedagogico .lado-cabeca h3 { color: var(--ped-tinta); }

.faixa-financeiro {
  background: var(--fin-campo);
  border-color: var(--fin-borda);
  border-left-color: var(--marca-fin);
  border-top-color: var(--fin-borda);
}
.faixa-financeiro .lado-cabeca h3 { color: var(--fin-tinta); }

/* O "seu lado" deixa de precisar de fundo próprio: a cor da área já
   separa os painéis. Ele fica marcado pela borda cheia. */
.lado.meu { background: inherit; }
.lado-comercial.meu  { border-color: var(--marca-com); }
.lado-pedagogico.meu { border-color: var(--marca-ped); }
.faixa-financeiro.meu { border-color: var(--marca-fin); }

/* ---- dentro de um painel colorido, quem avança é o branco */

.lado .pendencia-item,
.lado.meu .pendencia-item,
.faixa-financeiro .foco {
  background: var(--fundo-cartao);
  border-color: rgba(0, 0, 0, .07);
}
.lado .pendencia-item:hover { border-color: var(--controle); background: var(--fundo-cartao); }

.lado .acao-item {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(0, 0, 0, .07);
}
.lado .acao-item:hover { background: var(--fundo-cartao); border-color: var(--controle); }
.lado .acao-item.indisponivel { background: transparent; }
.lado .acao-item.indisponivel:hover { background: transparent; border-color: var(--borda); }

/* ---- o número e o selo herdam a matiz da área */

.lado-comercial  .selo-conta { background: var(--com-borda); color: var(--com-tinta); }
.lado-pedagogico .selo-conta { background: var(--ped-borda); color: var(--ped-tinta); }
.lado-comercial  .pendencia-numero { color: var(--com-tinta); }
.lado-pedagogico .pendencia-numero { color: var(--ped-tinta); }
/* Vermelho continua só para o que está travando alguém. */
.lado .pendencia-item.grave .pendencia-numero { color: var(--tarde); }
.lado-comercial  .acao-item strong { color: var(--texto); }
.lado-comercial  .faz-aqui h4,
.lado-pedagogico .faz-aqui h4 { color: var(--texto-suave); }

/* ---- os botões de atalho no pé de cada painel */

.lado .atalhos button { background: rgba(255, 255, 255, .6); }
.lado .atalhos button:hover { background: var(--fundo-cartao); }

/* ------------------------------------------------- avisos da vistoria */

/* O rótulo "O que você faz aqui" era 11px em caixa alta com
   espacejamento: a vistoria marca isso como rótulo micro. Vira frase. */
.faz-aqui h4 {
  font-family: var(--corpo);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* 3.3:1 sobre o fundo claro, abaixo do legível. */
.data-de-hoje { color: var(--texto-suave); font-size: 12px; }

/* A vistoria mediu 73% do texto abaixo de 13px: rótulo e legenda sobem
   para 12, que é o piso de texto secundário. */
.figura-rotulo, .figura-legenda, .painel-nota, .seu-lado { font-size: 12px; }

.saudacao h1 {
  font-family: var(--titulo);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0 0 5px;
}

/* ==================================================================
   SIMETRIA — pedido do usuário em 20/10/2026
   ==================================================================
   "Que absolutamente tudo no sistema esteja simetricamente alinhado,
   não quero espaços vagos ou desalinhados."

   O que isso exige, e como cada parte entrega:

   1. Mesma grade. Os dois lados são duas colunas iguais, não auto-fit.
   2. Mesmo número de linhas. Resolvido no inicio.js: cada área tem
      quatro filas e quatro ações, e a fila zerada continua na tela.
   3. Mesma altura de linha. Fila e ação têm altura fixa no desktop, e a
      explicação corta com reticência em vez de pular para a segunda
      linha e desalinhar a coluna do lado.
   4. Mesmo pé. O rodapé de atalhos é empurrado para baixo, então os
      dois painéis terminam exatamente na mesma linha.

   No telefone as regras 3 e 4 saem: lá os painéis ficam um embaixo do
   outro, não há com o que alinhar, e cortar texto só atrapalharia. */

.dois-lados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.lado {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Empurra o rodapé para o pé do cartão: é o que alinha o fim dos dois. */
.lado .atalhos { margin-top: auto; padding-top: 16px; }

.pendencias { display: grid; gap: 8px; margin: 14px 0 0; }

@media (min-width: 901px) {
  .pendencia-item {
    height: 58px;
    align-items: center;
  }
  .acao-item {
    height: 54px;
    align-content: center;
  }
  /* Uma linha só. Sem isto, uma explicação que quebra em duas linhas
     empurra todas as de baixo e desalinha a coluna vizinha. */
  .pendencia-texto strong,
  .pendencia-texto span,
  .acao-item strong,
  .acao-item span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .pendencia-texto { min-width: 0; }
  .foco { height: 62px; align-items: center; }
}

/* ---------------------------------------------- a fila zerada

   Ela fica, apagada, com borda tracejada: informa que foi conferido e
   mantém os dois painéis com o mesmo número de linhas. */

.pendencia-item.zerada {
  background: transparent;
  border-style: dashed;
}
.lado .pendencia-item.zerada,
.lado.meu .pendencia-item.zerada { background: transparent; }
.lado .pendencia-item.zerada:hover { background: rgba(255, 255, 255, .5); }
.pendencia-item.zerada .pendencia-numero { color: var(--controle); font-weight: 400; }
.lado-comercial  .pendencia-item.zerada .pendencia-numero,
.lado-pedagogico .pendencia-item.zerada .pendencia-numero { color: var(--controle); }
.pendencia-item.zerada .pendencia-texto strong { color: var(--texto-suave); font-weight: 500; }
.pendencia-item.zerada .pendencia-texto span { color: var(--tinta-fraca); }

/* ------------------------------------------- as grades de quatro

   Os quatro números do topo, os quatro focos do financeiro e as nove
   etapas do trilho usam colunas de fração igual, para as réguas
   internas caírem sempre no mesmo lugar. */

/* Seis numeros agora: turmas, alunos, pessoas fisicas, empresas, horas e
   NPS. Seis colunas iguais na tela cheia; tres quando aperta, que ainda
   divide certo; duas no telefone. Nunca um numero sobrando sozinho. */
.figuras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.figuras .figura { padding-left: 13px; padding-right: 13px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .figuras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figura:nth-child(3n + 1) { border-left: 0; }
  .figura:nth-child(n + 4) { border-top: 1px solid var(--regua); }
}
/* No telefone continuam duas por linha. A regra do celular mora mais
   acima no arquivo, e sem esta repeticao a de seis colunas a venceria
   por vir depois. */
@media (max-width: 760px) {
  .figuras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.focos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.faixa-financeiro { display: flex; flex-direction: column; }

@media (max-width: 900px) {
  .dois-lados { grid-template-columns: minmax(0, 1fr); }
  .focos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .focos { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------- últimos ajustes medidos
   A vistoria mediu 64% do texto abaixo de 13px. A explicação de cada
   fila e de cada ação é texto de leitura, não rótulo: sobe para 13. */
.pendencia-texto span, .acao-item span { font-size: 13px; }
.pendencia-texto strong, .acao-item strong { font-size: 13px; }
.etapa-nome { font-size: 12px; }

/* As bordas em rgba liam como preto puro na medição, e o campo terra
   lia como creme amarelado. Tons sólidos e um passo menos quente. */
:root { --fin-campo: #F2EAE6; --fin-borda: #E0D2C9; }
.lado .pendencia-item,
.lado.meu .pendencia-item,
.faixa-financeiro .foco,
.lado .acao-item { border-color: var(--borda); }

@media (max-width: 760px) {
  /* A faixa de abas rola: sem folga à direita o último rótulo encosta
     na borda da tela. */
  .linha-abas { padding-right: 16px; }
}

@media (max-width: 760px) {
  /* A faixa de abas rola com o dedo. Esmaecer a borda direita deixa
     claro que ha mais para o lado, e o corte deixa de parecer defeito. */
  .linha-abas {
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); /* taste-skill-ignore: mascara de rolagem, nao preenchimento */
    mask-image: linear-gradient(to right, #000 88%, transparent 100%); /* taste-skill-ignore: mascara de rolagem, nao preenchimento */
  }
}

@media (max-width: 760px) {
  /* A linha 2 usa atalho de padding mais acima, que anulava a folga da
     direita. Reponho so nela, para as duas faixas rolarem igual. */
  .linha-abas.linha-2 { padding-right: 24px; }
}

/* ==================================================================
   AS CORES DAS ÁREAS — amarelo, verde e vermelho
   ==================================================================
   Pedido do usuário em 20/10/2026: comercial em tom de amarelo,
   pedagógico em tom de verde, financeiro em tom de vermelho, "no mesmo
   grau de transparência".

   O grau é literalmente o mesmo: cada campo é a cor da área a 15% sobre
   o fundo da página, e cada borda é a mesma cor a 35%. Os valores estão
   cravados em hexadecimal em vez de rgba porque as linhas brancas de
   dentro ficam POR CIMA do campo — com transparência empilhada o branco
   deixaria de ser branco.

   As três bases vêm do brandbook: --amarelo #F2B826, --verde #42B662 e
   o vermelho da marca #C3161C.

   Uma consequência a vigiar: o campo do financeiro agora é vermelho, e
   vermelho também é a cor de "atrasado" no resto do sistema. Por isso a
   tinta de atraso dentro dessa faixa é mais escura que o campo, para o
   sinal continuar se destacando em vez de sumir no fundo. */

:root {
  /* campo = base a 15% sobre #F4F2F1 · borda = base a 35% */
  --com-campo: #F4E9D3;  --com-borda: #F3DEAA;  --com-tinta: #6B4A0C;
  --ped-campo: #D9E9DC;  --ped-borda: #B6DDBF;  --ped-tinta: #155B30;
  --fin-campo: #EDD1D1;  --fin-borda: #E3A5A6;  --fin-tinta: #8C1118;

  /* A marca de 3px e o ponto do trilho: versão escura o bastante para
     passar como elemento gráfico (3:1) sobre o fundo claro. O amarelo
     puro do brandbook dava 1.8:1, invisível como marcador. */
  --marca-com: #B07908;
  --marca-ped: #1F7A42;
  --marca-fin: #B3121A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --com-campo: #2A2212;  --com-borda: #4A3A1A;  --com-tinta: #E3BC6A;
    --ped-campo: #15281D;  --ped-borda: #255C38;  --ped-tinta: #5FC98D;
    --fin-campo: #2C1618;  --fin-borda: #5E2529;  --fin-tinta: #EF8D92;
    --marca-com: #E3BC6A;
    --marca-ped: #5FC98D;
    --marca-fin: #EF8D92;
  }
}
:root[data-tema="escuro"] {
  --com-campo: #2A2212;  --com-borda: #4A3A1A;  --com-tinta: #E3BC6A;
  --ped-campo: #15281D;  --ped-borda: #255C38;  --ped-tinta: #5FC98D;
  --fin-campo: #2C1618;  --fin-borda: #5E2529;  --fin-tinta: #EF8D92;
  --marca-com: #E3BC6A;
  --marca-ped: #5FC98D;
  --marca-fin: #EF8D92;
}

/* O número de cada fila herda a tinta da área; o que trava alguém
   continua em vermelho de atraso, que dentro do campo vermelho do
   financeiro ainda se separa por ser bem mais escuro. */
.lado-comercial  .pendencia-numero { color: var(--com-tinta); }
.lado-pedagogico .pendencia-numero { color: var(--ped-tinta); }
.lado .pendencia-item.grave .pendencia-numero { color: var(--tarde); }
.faixa-financeiro .foco.acende .foco-numero { color: var(--fin-tinta); }

.lado-comercial  .selo-conta { background: var(--com-borda); color: var(--com-tinta); }
.lado-pedagogico .selo-conta { background: var(--ped-borda); color: var(--ped-tinta); }

/* A legenda do trilho e o marcador das abas seguem as mesmas três. */
.trilho-legenda .area-comercial::before  { background: var(--marca-com); }
.trilho-legenda .area-pedagogico::before { background: var(--marca-ped); }
.trilho-legenda .area-financeiro::before { background: var(--marca-fin); }
.etapa.area-comercial.tem  .etapa-ponto { background: var(--marca-com); }
.etapa.area-pedagogico.tem .etapa-ponto { background: var(--marca-ped); }
.etapa.area-financeiro.tem .etapa-ponto { background: var(--marca-fin); }

/* As etiquetas de estado na lista de turmas: o ponto diz de quem é a
   vez, com as mesmas três cores. */
.etiqueta.estado-vendida::before,
.etiqueta.estado-faturamento_solicitado::before { background: var(--marca-com); }
.etiqueta.estado-instrutor_definido::before,
.etiqueta.estado-em_preparacao::before,
.etiqueta.estado-em_execucao::before,
.etiqueta.estado-realizada::before,
.etiqueta.estado-evidencias_enviadas::before    { background: var(--marca-ped); }
.etiqueta.estado-concluida::before              { background: var(--marca-fin); }

/* ------------------------------------------- financeiro em marinho
   Troca pedida depois de ver o vermelho em tela: ele competia com o
   vermelho que significa "atrasado". O marinho #010066 e a secundaria
   do brandbook, e entra no mesmo grau das outras duas: 15% para o
   campo e 35% para a borda, sobre o fundo da pagina. */
:root {
  --fin-campo: #D0CEDC;  --fin-borda: #9F9DC0;  --fin-tinta: #010066;
  --marca-fin: #010066;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fin-campo: #151A2E;  --fin-borda: #2A3356;  --fin-tinta: #A8B0E8;
    --marca-fin: #A8B0E8;
  }
}
:root[data-tema="escuro"] {
  --fin-campo: #151A2E;  --fin-borda: #2A3356;  --fin-tinta: #A8B0E8;
  --marca-fin: #A8B0E8;
}

/* ------------------------------------- texto secundario sobre campo
   Medido: o cinza --texto-suave dava 4.1:1 sobre o campo colorido,
   abaixo do minimo. Dentro de painel com cor ele escurece um passo. */
.lado .explica,
.lado .seu-lado,
.lado .faz-aqui h4,
.lado .pendencia-texto span,
.lado .acao-item span,
.faixa-financeiro .explica,
.faixa-financeiro .seu-lado,
.faixa-financeiro .painel-nota,
.faixa-financeiro .foco-texto span { color: #4A4542; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .lado .explica,
  :root:not([data-tema="claro"]) .lado .pendencia-texto span,
  :root:not([data-tema="claro"]) .lado .acao-item span,
  :root:not([data-tema="claro"]) .faixa-financeiro .explica,
  :root:not([data-tema="claro"]) .faixa-financeiro .foco-texto span { color: #c4c0bd; }
}

/* ---------------------------------- o fio de 3px sai dos paineis
   Com o painel inteiro no campo da area, o fio na borda esquerda vira
   repeticao: a cor ja diz de quem e o painel. A medicao tambem o
   acusava como borda pesada. Ele continua so na barra de abas, onde e
   o unico sinal de area sobre fundo neutro. */
.lado-comercial, .lado-pedagogico, .faixa-financeiro { border-left-width: 1px; }
.lado-comercial  { border-left-color: var(--com-borda); }
.lado-pedagogico { border-left-color: var(--ped-borda); }
.faixa-financeiro { border-left-color: var(--fin-borda); border-top-color: var(--fin-borda); }
.lado-comercial.meu  { border-color: var(--com-tinta); }
.lado-pedagogico.meu { border-color: var(--ped-tinta); }
.faixa-financeiro.meu { border-color: var(--fin-tinta); }

/* --------------------------------- "o seu lado" sem borda escura
   Marcar o seu lado com borda de tinta escura em volta do cartao pesa
   demais sobre um painel ja colorido, e a medicao acusa. Quem marca
   agora e o proprio campo, um passo mais forte: a mesma cor a 22% em
   vez de 15%. A borda continua igual a dos outros. */
.lado-comercial.meu  { background: #F4E5C4; border-color: var(--com-borda); }
.lado-pedagogico.meu { background: #CDE5D2; border-color: var(--ped-borda); }
.faixa-financeiro.meu { background: #BFBDD2; border-color: var(--fin-borda); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .lado-comercial.meu  { background: #352B16; }
  :root:not([data-tema="claro"]) .lado-pedagogico.meu { background: #1B3325; }
  :root:not([data-tema="claro"]) .faixa-financeiro.meu { background: #1C223C; }
}
:root[data-tema="escuro"] .lado-comercial.meu  { background: #352B16; }
:root[data-tema="escuro"] .lado-pedagogico.meu { background: #1B3325; }
:root[data-tema="escuro"] .faixa-financeiro.meu { background: #1C223C; }

/* ==================================================================
   A LINHA DE BAIXO — financeiro e administracao
   ==================================================================
   Os dois sao de consulta e manutencao, nao o trabalho do dia. Por isso
   dividem uma linha mais baixa que o par de cima: a proporcao diz o
   peso de cada coisa.

   A administracao fica no vermelho da marca. Ele so pode morar aqui
   porque o financeiro saiu dele: numa tela que se olha o dia todo,
   vermelho de alarme em painel grande cansa, mas numa tela de pouco
   uso ele marca bem. */

:root {
  --adm-campo: #EDD1D1;  --adm-borda: #E3A5A6;  --adm-tinta: #8C1118;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --adm-campo: #2C1618;  --adm-borda: #5E2529;  --adm-tinta: #EF8D92;
  }
}
:root[data-tema="escuro"] {
  --adm-campo: #2C1618;  --adm-borda: #5E2529;  --adm-tinta: #EF8D92;
}

.linha-baixo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 16px;
}
/* Meia linha vazia e exatamente o que nao queremos: sozinho, ocupa tudo. */
.linha-baixo.sozinho { grid-template-columns: minmax(0, 1fr); }

.painel-admin {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--adm-borda);
  border-radius: var(--raio);
  background: var(--adm-campo);
  min-width: 0;
}
.painel-admin .lado-cabeca h3 { color: var(--adm-tinta); }
.painel-admin .explica,
.painel-admin .painel-nota,
.painel-admin .foco-texto span { color: #4A4542; }
.painel-admin .foco,
.faixa-financeiro .foco {
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: 6px;
}
/* O item da administracao e um botao inteiro, sem numero na frente. */
.item-admin { cursor: pointer; font: inherit; text-align: left; width: 100%; }
.item-admin:hover { border-color: var(--adm-tinta); }
.item-admin .foco-texto strong { color: var(--texto); }

/* Dentro de meia largura os quatro focos viram dois por dois. */
.linha-baixo .focos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha-baixo.sozinho .focos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .linha-baixo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .linha-baixo .focos { grid-template-columns: minmax(0, 1fr); }
}

/* A faixa do financeiro trazia margem propria de quando era bloco solto
   na largura toda. Dentro da linha ela desalinhava o topo dos dois. */
.linha-baixo > * { margin: 0; }

/* ==================================================================
   AS ABAS DE MES DA AGENDA
   ==================================================================
   A tela responde "o que esta marcado agora e o que vem logo em
   seguida". Isso cabe em duas abas. As setas continuam para quem
   precisa ir mais longe, mas deixam de ser o caminho normal. */

.abas-mes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.aba-mes {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 9px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-cartao);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  min-width: 150px;
}
.aba-mes:hover { border-color: var(--controle); }
.aba-mes-rotulo { font-size: 11px; color: var(--texto-suave); }
.aba-mes-nome { font-size: 13px; font-weight: 600; }
/* A aba do mes que esta na tela: campo preenchido, nao so borda. */
.aba-mes[aria-selected="true"] {
  background: var(--dado-pale);
  border-color: var(--dado);
}
.aba-mes[aria-selected="true"] .aba-mes-rotulo,
.aba-mes[aria-selected="true"] .aba-mes-nome { color: var(--dado); }
.aba-mes:focus-visible { outline: 2px solid var(--dado); outline-offset: 2px; }

.barra-agenda { margin-bottom: 14px; }
.barra-agenda select { max-width: 200px; }
.barra-agenda select:first-of-type { margin-left: auto; }
.so-icone .seta { display: grid; place-items: center; }

@media (max-width: 560px) {
  .aba-mes { flex: 1 1 140px; min-width: 0; }
}

/* ==================================================================
   NOMES MAIORES, TEXTO SECUNDARIO MAIS NITIDO
   ==================================================================
   Pedido do usuario em 20/10/2026. Duas coisas separadas:

   1. Os nomes principais sobem de tamanho e de peso. Eram 13px/600, que
      e o tamanho do corpo: titulo do mesmo tamanho do texto nao lidera
      a leitura, so ocupa a linha.
   2. O texto secundario escurece. Ele estava em cinza claro demais, e
      em cima dos campos coloridos isso piora: o contraste caia para
      perto do minimo e o olho le como borrado, nao como discreto. */

/* ---- os nomes principais */

.lado-cabeca h3,
.painel-cabeca h3,
.painel-admin .lado-cabeca h3,
.faixa-financeiro .lado-cabeca h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.pendencia-texto strong,
.acao-item strong {
  font-size: 14px;
  font-weight: 700;
}

.foco-texto strong { font-size: 13.5px; font-weight: 700; }

.figura-rotulo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
}

.faz-aqui h4 { font-size: 12.5px; font-weight: 700; }

.etapa-num { font-size: 15px; font-weight: 600; }

/* ---- o texto secundario, mais nitido

   Escurecer e subir o peso de 400 para 500 nos tamanhos pequenos: nessa
   medida o peso regular em cinza claro e o que mais some da tela. */

:root { --texto-suave: #56514E; --tinta-fraca: #6E6966; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --texto-suave: #b4b0ad; --tinta-fraca: #8d8d8d; }
}
:root[data-tema="escuro"] { --texto-suave: #b4b0ad; --tinta-fraca: #8d8d8d; }

.lado .explica,
.lado .seu-lado,
.lado .faz-aqui h4,
.lado .pendencia-texto span,
.lado .acao-item span,
.faixa-financeiro .explica,
.faixa-financeiro .seu-lado,
.faixa-financeiro .painel-nota,
.faixa-financeiro .foco-texto span,
.painel-admin .explica,
.painel-admin .painel-nota,
.painel-admin .foco-texto span { color: #3E3A37; }

.pendencia-texto span,
.acao-item span,
.foco-texto span,
.figura-legenda,
.painel-nota,
.data-de-hoje,
.etapa-nome,
.trilho-legenda { font-weight: 500; }

.fato-do-dia { color: var(--texto-suave); font-weight: 500; }

/* A fila zerada continua mais quieta que uma ativa, mas nao abaixo do
   legivel: medida deu 4.1:1 sobre o campo colorido, e o minimo e 4.5. */
.lado .pendencia-item.zerada .pendencia-texto span { color: #5F5A57; }
.lado .pendencia-item.zerada .pendencia-texto strong { color: #4A4542; }
.lado .acao-item.indisponivel span { color: #5F5A57; }
.lado .acao-item.indisponivel strong { color: #4A4542; }

/* ==================================================================
   O QUE É CLICÁVEL PRECISA PARECER CLICÁVEL
   ==================================================================
   Pedido do usuário em 20/10/2026: "parece que tudo é uma coisa só nos
   textos e layouts".

   Ele tem razão, e a causa é a mesma em três lugares: a fila, a ação e
   o atalho são todos botões, mas nenhum se separava do texto em volta.
   Fundo quase igual ao do painel, borda fininha, nenhum sinal de que
   levam a algum lugar.

   O conserto, nos três: corpo branco cheio, borda visível, e uma seta
   à direita dizendo que o clique vai dar em outra tela. A seta é
   desenhada por pseudo-elemento, para não precisar de span no HTML. */

/* ---- a seta de "isto leva a algum lugar" */

.pendencia-item,
.acao-item {
  position: relative;
  padding-right: 34px;
}
.pendencia-item::after,
.acao-item::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid var(--controle);
  border-bottom: 2px solid var(--controle);
  transform: rotate(-45deg);
  transition: transform .12s ease, border-color .12s ease;
}
.pendencia-item:hover::after,
.acao-item:hover::after {
  border-color: var(--texto);
  transform: rotate(-45deg) translate(2px, 2px);
}
/* O que não cabe agora não leva a lugar nenhum: sem seta. */
.acao-item.indisponivel::after { display: none; }

/* ---- corpo cheio e borda de verdade */

.lado .pendencia-item,
.lado.meu .pendencia-item,
.faixa-financeiro .foco,
.painel-admin .foco {
  background: var(--fundo-cartao);
  border: 1px solid var(--controle);
  box-shadow: none;
}
.lado .acao-item {
  background: var(--fundo-cartao);
  border: 1px solid var(--controle);
}
.lado .acao-item.indisponivel {
  background: transparent;
  border-style: dashed;
  border-color: var(--borda);
}
.lado .pendencia-item.zerada {
  background: transparent;
  border-style: dashed;
  border-color: var(--borda);
}
.lado .pendencia-item:hover,
.lado .acao-item:hover,
.item-admin:hover {
  border-color: var(--texto);
  background: var(--fundo-cartao);
}
.lado .acao-item.indisponivel:hover,
.lado .pendencia-item.zerada:hover {
  border-color: var(--borda);
  background: transparent;
}

/* ---- os atalhos do pé: botões, não links soltos */

.atalhos button,
.lado .atalhos button {
  background: var(--fundo-cartao);
  border: 1px solid var(--controle);
  color: var(--texto);
  font-weight: 600;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 6px;
}
.atalhos button:hover,
.lado .atalhos button:hover {
  border-color: var(--texto);
  background: var(--fundo-suave);
}

/* ---- o botão de ação principal fica mais claramente principal */

button {
  font-weight: 600;
  letter-spacing: -0.005em;
}
button:focus-visible,
.pendencia-item:focus-visible,
.acao-item:focus-visible,
.item-admin:focus-visible {
  outline: 2px solid var(--dado);
  outline-offset: 2px;
}

/* ==================================================================
   O CABEÇALHO MAIOR
   ==================================================================
   Pedido junto: a barra de topo pode crescer. Ela estava em 52px, que
   é a medida de uma ferramenta densa; com a marca em 21px sobrava
   pouco ar em volta dela. Sobe para 64px, e a marca cresce junto. */

.barra { height: 64px; gap: 16px; }
.marca-barra .simbolo  { height: 27px; }
.marca-barra .logotipo { height: 19px; }
.fio-marca { height: 28px; }
.barra .nome { font-size: 13px; }
.barra .quem { font-size: 13px; }
.barra button { font-size: 13px; padding: 7px 12px; }

/* A linha 1 das abas acompanha, para o cromo não ficar desequilibrado. */
.linha-abas.linha-1 { height: 44px; }
.linha-abas.linha-1 button { font-size: 14px; }

@media (max-width: 760px) {
  .barra { height: auto; }
  .marca-barra .simbolo  { height: 24px; }
  .marca-barra .logotipo { height: 17px; }
}

/* ==================================================================
   A BARRA DE ABAS, POR COR DE ÁREA
   ==================================================================
   Pedido do usuário em 20/10/2026: a barra melhor distribuída, mais
   legível, e cada botão na cor da sua área — a mesma ideia do marcador
   de 3px, agora valendo para o texto.

   O que muda:

   1. Os quatro grupos se espalham pela largura em vez de ficarem
      amontoados à esquerda. Cada um passa a ler como um bloco.
   2. Cada botão sai do cinza e vai para a tinta da sua área. As quatro
      tintas foram escolhidas escuras o bastante para passar bem sobre
      o branco da barra: âmbar 8.6:1, verde 7.9:1, marinho 16:1.
   3. A aba aberta ganha o campo pálido da área como pílula, em vez de
      só mudar de cor. É o que diz onde você está sem precisar ler.
   4. Tudo um ponto maior: 12.5px no lugar de 12. */

.linha-abas.linha-2 {
  justify-content: space-between;
  gap: 8px 18px;
  padding: 10px 0;
}

.grupo-abas {
  gap: 0 10px;
  padding-left: 12px;
}

.linha-abas.linha-2 button {
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 5px;
  margin: 0;
}

/* O rótulo da área também vai para a cor dela: ele deixa de ser legenda
   cinza e passa a abrir o bloco. */
.grupo-abas.area-comercial  .rotulo-grupo { color: var(--com-tinta); font-weight: 600; }
.grupo-abas.area-pedagogico .rotulo-grupo { color: var(--ped-tinta); font-weight: 600; }
.grupo-abas.area-financeiro .rotulo-grupo { color: var(--fin-tinta); font-weight: 600; }
.grupo-abas.area-sistema    .rotulo-grupo { color: var(--texto);     font-weight: 600; }

.grupo-abas.area-comercial  button { color: var(--com-tinta); }
.grupo-abas.area-pedagogico button { color: var(--ped-tinta); }
.grupo-abas.area-financeiro button { color: var(--fin-tinta); }
.grupo-abas.area-sistema    button { color: var(--texto-suave); }

.grupo-abas.area-comercial  button:hover { background: var(--com-campo); }
.grupo-abas.area-pedagogico button:hover { background: var(--ped-campo); }
.grupo-abas.area-financeiro button:hover { background: var(--fin-campo); }
.grupo-abas.area-sistema    button:hover { background: var(--fundo-suave); color: var(--texto); }

/* A aba aberta: pílula no campo da área, em negrito, sem sublinhado. */
.linha-abas.linha-2 button[aria-selected="true"] {
  text-decoration: none;
  font-weight: 700;
}
.grupo-abas.area-comercial  button[aria-selected="true"] { background: var(--com-campo); color: var(--com-tinta); }
.grupo-abas.area-pedagogico button[aria-selected="true"] { background: var(--ped-campo); color: var(--ped-tinta); }
.grupo-abas.area-financeiro button[aria-selected="true"] { background: var(--fin-campo); color: var(--fin-tinta); }
.grupo-abas.area-sistema    button[aria-selected="true"] { background: var(--fundo-suave); color: var(--texto); }

/* O marcador de 3px continua, agora como abertura do bloco colorido. */
.grupo-abas::before { height: 14px; width: 3px; }

/* Linha 1: o trabalho de todo dia, em tinta, com o sublinhado que diz
   onde você está. Ela não leva cor de área porque não é de área. */
.linha-abas.linha-1 button { color: var(--texto-suave); }
.linha-abas.linha-1 button:hover { color: var(--texto); }
.linha-abas.linha-1 button[aria-selected="true"] { color: var(--texto); }

@media (max-width: 900px) {
  /* Espalhar não cabe quando a linha rola: volta a encostar à esquerda. */
  .linha-abas.linha-2 { justify-content: flex-start; }
}

/* ==================================================================
   CELULAR, DENTRO DOS PADROES
   ==================================================================
   O padrao de toque pede alvo de 44px: dedo nao tem a mira do ponteiro,
   e alvo menor que isso erra. Vale para tudo que se clica — fila, acao,
   atalho, aba e os botoes da barra.

   Os tamanhos de texto tambem sobem um ponto: o telefone fica mais
   longe do olho que o monitor, e a mesma medida se le pior. */

@media (max-width: 760px) {

  /* ---- alvo de toque */
  .pendencia-item, .acao-item, .item-admin { min-height: 56px; }
  .atalhos button, .linha-abas button, .barra button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .barra button.so-icone { min-width: 44px; justify-content: center; }

  /* ---- a faixa de abas colorida, rolando com o dedo */
  .linha-abas.linha-1 { height: auto; padding: 4px 0; gap: 0 20px; }
  .linha-abas.linha-1 button { font-size: 15px; padding: 0 2px 8px; }
  .linha-abas.linha-2 { gap: 6px 14px; padding: 8px 0; }
  .linha-abas.linha-2 button { font-size: 13px; padding: 4px 9px; }
  .grupo-abas { padding-left: 11px; gap: 0 8px; }
  .rotulo-grupo { font-size: 12px; }

  /* ---- texto um ponto maior, que o telefone fica mais longe do olho */
  .pendencia-texto strong, .acao-item strong { font-size: 14.5px; }
  .pendencia-texto span, .acao-item span { font-size: 13.5px; }
  .explica { font-size: 13.5px; }
  .lado-cabeca h3, .painel-cabeca h3 { font-size: 16px; }
  .figura-rotulo { font-size: 13px; }
  .figura-legenda { font-size: 12px; }

  /* ---- a seta de clicavel encosta menos na borda */
  .pendencia-item, .acao-item { padding-right: 30px; }
  .pendencia-item::after, .acao-item::after { right: 11px; }
}

/* ==================================================================
   A BARRA SUPERIOR, DISTRIBUIDA COM SIMETRIA
   ==================================================================
   Pedido do usuario em 20/10/2026. Medido antes de mexer: em 1440 os
   quatro grupos nao cabiam numa linha com space-between, e Sistema caia
   sozinho numa segunda linha — tres grupos esticados em cima e um orfao
   embaixo. Espacamento igual nao e o mesmo que distribuicao igual.

   A solucao e a mesma dos paineis: grade de colunas iguais. Cada area
   ocupa exatamente um quarto da largura, sempre, e as bordas internas
   caem no mesmo lugar em qualquer tela. Simetria por construcao, nao
   por sorte de caber. */

.linha-abas.linha-2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 16px;
  align-items: start;
  justify-content: initial;
}
.linha-abas.linha-2 .grupo-abas {
  min-width: 0;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* Abaixo de 1100 nao cabem quatro colunas legiveis: viram duas. */
@media (max-width: 1100px) {
  .linha-abas.linha-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- a linha de cima da barra: identidade de um lado, acoes do outro

   Os controles estavam encostados uns nos outros no canto direito. Agora
   tem espaco igual entre eles e um fio separando quem voce e do que voce
   pode fazer. */

.barra .quem {
  padding-right: 14px;
  margin-right: 2px;
  border-right: 1px solid var(--borda);
  line-height: 1.6;
}
.barra button.vazio {
  padding: 7px 11px;
  border-radius: 6px;
  font-weight: 500;
}
.barra button.vazio:hover { background: var(--fundo-suave); border-color: var(--borda); }
.barra button.so-icone { padding: 7px; }

@media (max-width: 760px) {
  .linha-abas.linha-2 { display: flex; }
  .barra .quem { border-right: 0; padding-right: 0; }
}

/* ==================================================================
   SIMETRIA DENTRO DOS GRUPOS
   ==================================================================
   Exigencia do usuario em 20/10/2026: a barra simetricamente alinhada
   na parte superior, "inclusive dentro dos grupos".

   O que faltava: os quatro grupos ja eram colunas iguais, mas por
   dentro cada um quebrava os botoes onde desse — Comercial partia depois
   de "Contatos", Pedagogico depois de "Instrutores", e as linhas nao
   batiam entre si.

   Agora cada grupo e, ele proprio, uma grade de duas colunas iguais: o
   rotulo ocupa a linha inteira, e os botoes caem em celulas de mesma
   largura. Com isso toda a barra vira uma grade de 4 x (1 rotulo + 2
   linhas de botao), e as bordas internas caem no mesmo lugar nos quatro
   grupos — que e o que "simetrico" quer dizer aqui. */

.linha-abas.linha-2 .grupo-abas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 6px;
  align-content: start;
  justify-items: stretch;
}
.linha-abas.linha-2 .rotulo-grupo {
  grid-column: 1 / -1;
  padding-bottom: 1px;
}
.linha-abas.linha-2 .grupo-abas button {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Grupo de dois botoes vira coluna unica: duas linhas, a mesma altura
   dos grupos de quatro, em vez de uma linha cheia e outra vazia. E o que
   tira o unico buraco que sobrava na barra — e de quebra faz "Itens de
   despesa" caber inteiro, sem reticencias. */
.linha-abas.linha-2 .grupo-abas:has(> button:nth-of-type(2):last-of-type) {
  grid-template-columns: minmax(0, 1fr);
}

/* Grupo de tres: o ultimo ocupa a linha inteira, em vez de deixar meia
   celula vazia ao lado dele. Duas linhas, como os de quatro. */
.linha-abas.linha-2 .grupo-abas:has(> button:nth-of-type(3):last-of-type) > button:last-of-type {
  grid-column: 1 / -1;
}

/* Em duas colunas de area, o grupo cabe mais largo: tres botoes por
   linha, que e o que evita celula vazia sobrando. */
@media (max-width: 1100px) and (min-width: 761px) {
  .linha-abas.linha-2 .grupo-abas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* No telefone a faixa rola, entao grade nao se aplica: volta a fileira. */
@media (max-width: 760px) {
  .linha-abas.linha-2 .grupo-abas { display: flex; }
  .linha-abas.linha-2 .grupo-abas button { width: auto; display: inline-flex; }
  .linha-abas.linha-2 .rotulo-grupo { grid-column: auto; }
}

/* ==================================================================
   BARRA MAIOR E MAIS NITIDA, E OS DOIS BOTOES NOVOS
   ==================================================================
   Pedido do usuario em 20/10/2026, itens 1 a 7: marca maior, nome
   maior, controles da barra maiores e mais escuros, abas um ponto
   acima, e o olho da senha centrado no campo. */

/* ---- a marca e o nome */
.marca-barra .simbolo  { height: 32px; }
.marca-barra .logotipo { height: 23px; }
.fio-marca { height: 30px; }
.barra { height: 70px; }
.barra .nome {
  font-size: 15px;
  font-weight: 500;
  color: var(--texto);
}

/* ---- os controles da direita: maiores e em tinta, nao em cinza */
.barra .quem {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
}
.barra button.vazio {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  padding: 8px 13px;
}
.barra button.vazio:hover { color: var(--texto); background: var(--fundo-suave); }
.barra button.so-icone { padding: 8px; color: var(--texto); }

/* ---- o botao de voltar, colado na marca */
#botao-voltar { margin-left: -4px; }

/* ---- a acao principal do comercial */
.barra button.principal {
  background: var(--brand);
  color: #fff;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 7px;
  white-space: nowrap;
}
.barra button.principal:hover { background: var(--brand-forte); }

/* ---- as abas, um ponto acima e em tinta mais firme */
.linha-abas.linha-1 { height: 46px; }
.linha-abas.linha-1 button { font-size: 15px; font-weight: 500; }
.linha-abas.linha-1 button[aria-selected="true"] { font-weight: 700; }
.linha-abas.linha-2 button { font-size: 13.5px; font-weight: 600; }
/* O nome da area manda no bloco: maior que os botoes dele e em negrito,
   para a pessoa achar o proprio canto antes de ler item por item. */
.rotulo-grupo { font-size: 12px; font-weight: 700; }
.linha-abas.linha-2 .rotulo-grupo { font-size: 15px; font-weight: 700; }

/* ---- o olho da senha, centrado na altura do campo */
.campo-com-olho { position: relative; }
.campo-com-olho input { padding-right: 44px; }
.olho {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--texto-suave);
  cursor: pointer;
}
.olho:hover { background: var(--fundo-suave); color: var(--texto); }
.olho.vendo { color: var(--brand); }
.olho:focus-visible { outline: 2px solid var(--dado); outline-offset: 1px; }

@media (max-width: 760px) {
  .marca-barra .simbolo  { height: 28px; }
  .marca-barra .logotipo { height: 20px; }
  .barra .nome { display: none; }
  .barra button.principal { font-size: 13px; padding: 8px 12px; }
}

/* ------------------------------------------------- feriados na agenda
   Sinal para as duas areas: o dia marcado como feriado some do fundo
   branco e ganha o nome do feriado, para quem esta marcando data ver o
   motivo sem passar o mouse. Nacional e estadual se separam por cor,
   nao so por rotulo. */

.dia.feriado { background: var(--fundo-suave); }
.dia.feriado-nacional { box-shadow: inset 3px 0 0 var(--marca-fin); } /* taste-skill-ignore: faixa interna, nao sombra */
.dia.feriado-maranhao { box-shadow: inset 3px 0 0 var(--marca-com); } /* taste-skill-ignore: faixa interna, nao sombra */
.dia.feriado .numero-dia { color: var(--texto); font-weight: 600; }

.marca-feriado {
  display: block;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 600;
  margin: 1px 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dia.feriado-nacional .marca-feriado { color: var(--fin-tinta); }
.dia.feriado-maranhao .marca-feriado { color: var(--com-tinta); }

.amostra-feriado {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--fundo-suave);
}
.amostra-feriado.feriado-nacional { box-shadow: inset 3px 0 0 var(--marca-fin); } /* taste-skill-ignore: faixa interna, nao sombra */
.amostra-feriado.feriado-maranhao { box-shadow: inset 3px 0 0 var(--marca-com); } /* taste-skill-ignore: faixa interna, nao sombra */

/* O dia de feriado em vermelho, com o tipo acima do motivo.
   Pedido do usuario: ver de relance que e feriado, de que tipo, e por
   que — sem passar o mouse. */
.dia.feriado .numero-dia { color: var(--brand); font-weight: 700; }
.marca-feriado strong {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand);
}
.marca-feriado span {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dia.feriado-nacional .marca-feriado span,
.dia.feriado-maranhao .marca-feriado span { color: var(--texto-suave); }
.dia.feriado-nacional, .dia.feriado-maranhao { box-shadow: inset 3px 0 0 var(--brand); } /* taste-skill-ignore: faixa interna, nao sombra */
.amostra-feriado.feriado-nacional, .amostra-feriado.feriado-maranhao { box-shadow: inset 3px 0 0 var(--brand); } /* taste-skill-ignore: faixa interna, nao sombra */

/* O nome do sistema ficou mais longo: "Sistema de Gestao de Eventos e
   Treinamentos" pede 300px. Medido em 1440, os itens da barra pediam
   1202px numa coluna de 1185 e o nome era quem encolhia, aparecendo
   cortado com reticencia.

   Quem cede agora e o nome de quem esta logado, nao o nome do sistema:
   a pessoa sabe quem ela e, o sistema e que precisa se apresentar. E
   abaixo de 1280 o nome sai de cena, porque a marca ao lado ja
   identifica. */
.barra .nome { flex: 0 0 auto; }
.barra .quem {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .barra .nome { display: none; }
}

/* ==================================================================
   SINALIZACAO DA TURMA — onde esta, e o que a trava
   ==================================================================
   Pedido do usuario: cada turma com sinal do status, da fase, e alerta
   do que esta pendente. A etiqueta de estado dizia ONDE ela esta; nao
   dizia QUANTO FALTA nem O QUE TRAVA. */

.cartao-trilho { padding: 16px 18px 10px; }

.trilho-turma {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}
.etapa-turma {
  display: grid;
  grid-template-rows: 18px auto;
  justify-items: center;
  gap: 7px;
  position: relative;
  min-width: 0;
}
/* O fio liga as etapas; avanca para os lados para virar uma linha so. */
.etapa-turma-fio {
  position: absolute;
  top: 8px;
  left: -4px;
  right: -4px;
  height: 2px;
  background: var(--borda);
}
.etapa-turma:first-child .etapa-turma-fio { left: 50%; }
.etapa-turma:last-child  .etapa-turma-fio { right: 50%; }
.etapa-turma.passou .etapa-turma-fio,
.etapa-turma.agora  .etapa-turma-fio { background: var(--texto); }

.etapa-turma-ponto {
  position: relative;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--fundo-cartao);
  box-shadow: inset 0 0 0 2px var(--controle); /* taste-skill-ignore: anel interno, nao sombra */
}
.etapa-turma.passou .etapa-turma-ponto {
  background: var(--texto);
  box-shadow: none;
}
/* A etapa da vez: maior e na cor da marca, que aqui significa "e aqui
   que a turma esta parada agora". */
.etapa-turma.agora .etapa-turma-ponto {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  background: var(--brand);
  box-shadow: none;
}
.etapa-turma-nome {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: var(--tinta-fraca);
  word-break: break-word;
}
.etapa-turma.passou .etapa-turma-nome { color: var(--texto-suave); }
.etapa-turma.agora  .etapa-turma-nome { color: var(--texto); font-weight: 700; }

.trilho-turma.fora-do-trilho {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--texto-suave);
}

/* ---- a lista do que esta pendente */

.lista-sinais { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-sinais li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
}
/* Vermelho so no que impede a turma de seguir. O resto e aviso. */
.lista-sinais li.grave { border-left: 3px solid var(--brand); }
.lista-sinais strong { font-size: 13px; font-weight: 700; }
.lista-sinais span { font-size: 12.5px; color: var(--texto-suave); }

/* ---- a sinalizacao na lista de turmas */

.celula-etapa { display: inline-flex; align-items: center; gap: 8px; }
.passo-de { font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sem-pendencia { color: var(--controle); }

/* ==================================================================
   ATRASO E TRAVA — a etapa parada depois da execucao
   ==================================================================
   Depois de o treinamento ser executado comeca uma sucessao de
   providencias. Passadas 48 horas sem movimento e sem motivo escrito, a
   turma trava. Por isso estes dois blocos sao os unicos da tela que vem
   no vermelho cheio da marca: nao sao aviso, sao parede. */

.atraso-turma {
  border-color: var(--adm-borda);
  background: var(--falha-bg);
  border-left: 3px solid var(--brand);
  margin: 0 0 16px;
}
.atraso-turma h2,
.atraso-turma h3 { color: var(--falha-ink); }
.atraso-turma .explica { color: var(--falha-ink); opacity: 0.85; }

/* ---- a tela que para o sistema do operador */

/* Centrada e estreita porque nao ha mais nada para ver: enquanto nao
   justificar, esta e a unica tela que o sistema abre. */
.trava-operador {
  display: grid;
  justify-items: stretch;
  max-width: 720px;
  margin: 0 auto;
}
.trava-operador .atraso-turma { margin: 0; }
.trava-operador h2 { font-size: 20px; }

.lista-travadas {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
/* Nome a esquerda, botao a direita, alinhados pela base em qualquer
   largura: minmax(0, 1fr) para o nome comprido nao empurrar o botao. */
.travada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--adm-borda);
  border-radius: 6px;
  background: var(--fundo-cartao);
}
.travada-quem { display: grid; gap: 2px; min-width: 0; }
.travada-quem strong { font-size: 14px; }
.travada-quem .explica { margin: 0; font-size: 12.5px; }

@media (max-width: 560px) {
  .travada { grid-template-columns: minmax(0, 1fr); }
  .travada button { width: 100%; }
}

/* Dentro do cartao de atraso, "JUSTIFICAR ATRASO" e a unica coisa a
   fazer na tela: vem no vermelho da marca, nao no cinza de acao de
   risco, porque aqui nao e risco — e a saida. */
.atraso-turma button.risco {
  background: var(--brand);
  color: #fff;
}
.atraso-turma button.risco:hover { filter: brightness(1.1); }

/* ==================================================================
   PAINEL DE INDICADORES
   ==================================================================
   Dados globais com filtro. A tela inicial mostra o mes e so o mes; aqui
   a pessoa escolhe o recorte. Mesmos componentes do resto do sistema —
   figuras, cartao, tabela — mais a barra de filtro e a barra horizontal,
   que e grafico feito com div, sem biblioteca nenhuma. */

.filtros-painel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
}
.campo-filtro { display: grid; gap: 4px; min-width: 0; }
.campo-filtro > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  font-weight: 600;
}
.campo-filtro select,
.campo-filtro input { min-width: 150px; margin: 0; }
.filtros-painel > button { align-self: end; }

/* Quatro numeros em vez de seis: a linha do dinheiro tem quatro, e nao
   pode herdar a grade de seis e deixar duas celulas vazias. */
.figuras.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) and (min-width: 761px) {
  .figuras.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figuras.quatro .figura:nth-child(3n + 1) { border-left: 1px solid var(--regua); }
  .figuras.quatro .figura:nth-child(odd) { border-left: 0; }
  .figuras.quatro .figura:nth-child(n + 3) { border-top: 1px solid var(--regua); }
}

.barras { display: grid; gap: 7px; margin-top: 12px; }
.barra-linha {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
}
.barra-rotulo {
  font-size: 12.5px;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-trilho {
  height: 10px;
  border-radius: 5px;
  background: var(--regua);
  overflow: hidden;
}
.barra-cheia { display: block; height: 100%; background: var(--dado); }
.barra-valor {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .barra-linha { grid-template-columns: 92px minmax(0, 1fr) 44px; gap: 8px; }
  .barra-rotulo { font-size: 12px; }
}

/* Os botoes da administracao alinhados com os focos do financeiro.
   Os dois paineis ja tem a mesma altura e itens da mesma altura, mas o
   texto de abertura tem tamanhos diferentes — tres linhas de um lado,
   uma do outro — e isso jogava um bloco de botoes 39px acima do outro.
   Encostando os dois blocos no pe do painel, as linhas caem no mesmo
   lugar nos dois lados, que e o que o olho compara. */
.linha-baixo > section { display: flex; flex-direction: column; }
.linha-baixo .focos { margin-top: auto; }

/* O voltar da barra: seta mais a palavra, sempre no mesmo lugar. Fica
   apagado enquanto nao ha para onde voltar, em vez de sumir — botao que
   so aparece as vezes e botao que ninguem aprende a procurar. */
.botao-voltar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.botao-voltar svg { flex: none; }
.botao-voltar[disabled] {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 760px) {
  .botao-voltar span { display: none; }
}

/* A lista de lancamento de despesa: catalogo inteiro, quantidade ao lado,
   um clique no fim. O que estava lancado fica apagado, para nao lancar
   duas vezes a mesma coisa sem perceber. */
.catalogo-despesas { margin: 10px 0 18px; }
.catalogo-despesas table { margin: 0; }
.escolha-despesa {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.escolha-despesa input { margin-top: 2px; flex: none; }
.escolha-despesa strong { display: block; font-size: 13px; }
.escolha-despesa .explica { margin: 0; font-size: 12px; }
.qtd-catalogo {
  width: 92px;
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.total-linha { font-variant-numeric: tabular-nums; font-size: 13px; }
.catalogo-despesas tr.ja-lancado { opacity: .5; }
@media (max-width: 560px) {
  .qtd-catalogo { width: 70px; }
}

/* ==================================================================
   RELATORIO DO INSTRUTOR — a pagina do QR
   ==================================================================
   Mesma folha da avaliacao do aluno, mais larga porque a chamada tem
   tres campos por linha. E preenchida em pe, no celular, no cliente:
   alvo grande, pouca digitacao, nada que exija duas maos. */

.folha-larga { max-width: 760px; }

.bloco-relatorio {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 16px 18px;
  margin: 0 0 16px;
}
.bloco-relatorio legend {
  font-family: var(--titulo);
  font-size: 15px;
  font-weight: 600;
  padding: 0 7px;
}
.bloco-relatorio > label { margin-top: 12px; }
.bloco-relatorio > label:first-of-type { margin-top: 4px; }

.dois-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

/* "Estava bem" ja vem marcado: o instrutor so mexe no que deu errado,
   que e o caso raro. */
.escolha-sim-nao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
.escolha-sim-nao input { margin-top: 3px; flex: none; width: 20px; height: 20px; }

/* A chamada: nome em cima, campos embaixo no telefone; tudo na mesma
   linha quando ha largura. */
.aluno-chamada {
  display: grid;
  gap: 6px;
  padding: 11px 0;
  border-top: 1px solid var(--regua);
}
.aluno-chamada:first-child { border-top: 0; }
.aluno-nome strong { font-size: 14px; display: block; }
.aluno-nome .explica { margin: 0; font-size: 12px; }
.aluno-campos {
  display: grid;
  grid-template-columns: 1.1fr .7fr 1.2fr;
  gap: 8px;
}
.aluno-campos select,
.aluno-campos input { margin: 0; min-width: 0; }
.aluno-chamada.novo {
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  align-items: center;
}
.aluno-chamada.novo input { margin: 0; }

@media (min-width: 620px) {
  .aluno-chamada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 12px;
  }
}
@media (max-width: 420px) {
  .aluno-campos { grid-template-columns: 1fr 1fr; }
  .aluno-campos select:last-child { grid-column: 1 / -1; }
}

/* As quatro condicoes do relatorio, em linha: le-se de relance se algo
   deu errado, sem abrir o relatorio inteiro. */
.linha-condicoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--texto-suave);
  align-items: center;
}
.linha-condicoes span { display: inline-flex; align-items: center; gap: 6px; }

/* A busca da lista de turmas e o campo que mais se usa da barra: mais
   largo que os outros, para o nome do cliente caber sem cortar. */
.campo-busca { flex: 1 1 240px; }
.campo-busca input { min-width: 0; width: 100%; }

/* No telefone a barra de filtro empilhava um campo por linha, cada um com
   uma largura, e empurrava a lista para longe da primeira tela. Agora:
   busca na linha inteira e os filtros dois a dois, todos da mesma
   largura. Vale para turmas, alunos e indicadores, que usam a mesma barra. */
@media (max-width: 560px) {
  .filtros-painel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .filtros-painel .campo-busca,
  .filtros-painel > button { grid-column: 1 / -1; }
  .filtros-painel .campo-filtro select,
  .filtros-painel .campo-filtro input { min-width: 0; width: 100%; }
}

/* Botoes de linha nao quebram em duas fileiras: a celula de acoes fica
   na largura dos botoes, e e a coluna de texto que cede. Vale para toda
   tabela do sistema — tres botoes em duas linhas era o que deixava a
   lista de clientes com cara de quebrada. */
td.acoes { white-space: nowrap; }
td.acoes .linha-botoes { flex-wrap: nowrap; }

/* Nome, documento e tipo numa celula so, na lista de clientes. */
.nome-cliente { display: grid; gap: 2px; min-width: 180px; }
.nome-cliente strong { font-size: 13.5px; }
.nome-cliente .explica {
  margin: 0;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.nome-cliente .etiqueta { font-size: 10.5px; }

/* ==================================================================
   VALIDACAO DE CERTIFICADO — a pagina do QR
   ================================================================== */
.selo-validacao {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--titulo); font-size: 30px; font-weight: 600; color: #fff;
}
.selo-validacao.ok { background: #1F7A42; }
.selo-validacao.vencido { background: #B07908; }
.selo-validacao.ruim { background: var(--brand); }
#resultado h1 { text-align: center; }
#resultado > .explica { text-align: center; }
.ficha-validacao {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px;
  margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo-cartao); font-size: 14px;
}
.ficha-validacao dt { color: var(--texto-suave); font-size: 12.5px; padding-top: 1px; }
.ficha-validacao dd { margin: 0; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.redes-validacao { margin-top: 18px; text-align: center; }
.linha-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.botao-rede {
  display: inline-block; padding: 9px 14px; border-radius: 6px; text-decoration: none;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 13.5px;
}

/* Conteúdo programático por carga horária: um bloco por carga, com a
   caixa de texto de um item por linha. */
.bloco-conteudo { padding: 12px 0; border-top: 1px solid var(--borda); }
.bloco-conteudo:first-of-type { border-top: 0; padding-top: 0; }
.bloco-conteudo .cabecalho-cartao { margin-bottom: 8px; }
.bloco-conteudo h4 { font-size: 14px; font-weight: 600; }
.bloco-conteudo ol { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.bloco-conteudo textarea { font-family: inherit; }

/* ------------------------------------------------------ "o seu lado"
   Pílula na tinta forte da ÁREA do painel (a mesma do título do painel),
   em negrito e um ponto maior que a nota: é o que diz à pessoa qual dos
   lados é o dela, e Paulo pediu que se destacasse (20/10/2026). Fica no
   fim do arquivo porque as regras de contraste dos painéis, acima,
   pintam todo span de dentro deles com um cinza escuro. */
.lado .seu-lado,
.faixa-financeiro .seu-lado,
.painel-admin .seu-lado {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.lado-comercial  .seu-lado { background: var(--com-tinta); }
.lado-pedagogico .seu-lado { background: var(--ped-tinta); }
.faixa-financeiro .seu-lado { background: var(--fin-tinta); }
.painel-admin .seu-lado { background: var(--adm-tinta); }
/* No escuro a tinta da área é clara: o texto vai para o escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .lado .seu-lado,
  :root:not([data-tema="claro"]) .faixa-financeiro .seu-lado,
  :root:not([data-tema="claro"]) .painel-admin .seu-lado { color: #15130f; }
}
:root[data-tema="escuro"] .lado .seu-lado,
:root[data-tema="escuro"] .faixa-financeiro .seu-lado,
:root[data-tema="escuro"] .painel-admin .seu-lado { color: #15130f; }

/* Botão miúdo ao lado de um dado (Ver no mapa, Copiar): não compete com
   o valor, só fica ao alcance. */
.botao-mini, a.botao-mini {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo-cartao);
  color: var(--texto-suave);
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
}
.botao-mini:hover, a.botao-mini:hover { color: var(--texto); border-color: var(--texto-suave); }

/* O que mudou nas turmas: uma linha por alteração, clicável, com a hora
   à esquerda em tabular e o antes → depois em destaque. */
.painel-mudancas { margin-bottom: 16px; }
/* Recolhido por padrão: a seta à esquerda do título abre a lista. Tudo em
   cinza — mudança de turma é informação, não alarme. */
.painel-mudancas > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 18px;
}
.painel-mudancas > summary::-webkit-details-marker { display: none; }
.painel-mudancas > summary::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.painel-mudancas[open] > summary::before { transform: rotate(45deg); margin-top: -7px; }
.painel-mudancas[open] > summary { margin-bottom: 10px; }
.painel-mudancas, .painel-mudancas .mudanca-item, .painel-mudancas .mudanca-item strong,
.painel-mudancas h3, .painel-mudancas .painel-nota { color: var(--texto); }
.painel-mudancas .painel-nota, .painel-mudancas .mudanca-quando, .painel-mudancas .explica { color: var(--texto-suave); }
.mudancas { display: grid; gap: 4px; }
.mudanca-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo-cartao);
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mudanca-item:hover { border-color: var(--texto-suave); }
.mudanca-quando { font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: 12px; }
.mudanca-texto .explica { display: block; margin-top: 2px; font-size: 12px; }
@media (max-width: 640px) {
  .mudanca-item { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------- pendência grave: faixa toda
   Só o número vermelho era pouco (Paulo, 21/10/2026): a pendência que
   trava alguém pinta a faixa inteira. Fica no fim do arquivo porque as
   regras dos painéis, acima, repintam fundo e texto dos itens. */
.pendencia-item.grave:not(.zerada),
.lado .pendencia-item.grave:not(.zerada),
.lado.meu .pendencia-item.grave:not(.zerada) {
  background: var(--tarde);
  border-color: var(--tarde);
  color: #fff;
}
.pendencia-item.grave:not(.zerada):hover,
.lado .pendencia-item.grave:not(.zerada):hover {
  background: var(--tarde);
  border-color: #fff;
  filter: brightness(1.08);
}
.pendencia-item.grave:not(.zerada) .pendencia-numero,
.lado .pendencia-item.grave:not(.zerada) .pendencia-numero,
.lado-comercial .pendencia-item.grave:not(.zerada) .pendencia-numero,
.lado-pedagogico .pendencia-item.grave:not(.zerada) .pendencia-numero,
.pendencia-item.grave:not(.zerada) .pendencia-texto strong,
.pendencia-item.grave:not(.zerada) .pendencia-texto span,
.lado .pendencia-item.grave:not(.zerada) .pendencia-texto span { color: #fff; }
.pendencia-item.grave:not(.zerada) .pendencia-texto span { opacity: .92; }
/* No escuro a cor "tarde" é um rosa claro: o texto vai para o escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .pendencia-item.grave:not(.zerada),
  :root:not([data-tema="claro"]) .pendencia-item.grave:not(.zerada) .pendencia-numero,
  :root:not([data-tema="claro"]) .pendencia-item.grave:not(.zerada) .pendencia-texto strong,
  :root:not([data-tema="claro"]) .pendencia-item.grave:not(.zerada) .pendencia-texto span { color: #2a0d0f; }
}
:root[data-tema="escuro"] .pendencia-item.grave:not(.zerada),
:root[data-tema="escuro"] .pendencia-item.grave:not(.zerada) .pendencia-numero,
:root[data-tema="escuro"] .pendencia-item.grave:not(.zerada) .pendencia-texto strong,
:root[data-tema="escuro"] .pendencia-item.grave:not(.zerada) .pendencia-texto span { color: #2a0d0f; }

/* O produto como está no RD, sob o curso do catálogo, na lista de turmas:
   a definição clara do que foi vendido. */
.produto-rd { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
/* O número da turma: embaixo da data na lista, e como etiqueta no cabeçalho
   da turma aberta (27/10/2026). Em cinza porque é referência, não dado. */
.numero-turma-lista { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cabecalho-tela .numero-turma { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- a barra de recorte
   Na margem de contribuição um filtro só vale para os quatro quadros, e
   essa barra fica entre o filtro e os números dizendo o que está ligado e
   quantas turmas ficaram de fora. É de propósito que ela seja feia de
   ignorar: número recortado com cara de número total é o jeito mais
   rápido de perder a confiança num painel. Cada etiqueta é um botão que
   desliga aquele filtro — ler o recorte e desfazê-lo no mesmo lugar. */
.recorte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: -6px 0 16px;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-suave);
  font-size: 13px;
}
.recorte.ativo { border-color: var(--dado); background: var(--dado-pale); }
.recorte-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--texto-suave);
}
.recorte.ativo .recorte-rotulo { color: var(--dado); }
.recorte-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo-cartao);
  color: var(--texto);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
/* `background` explícito: sem ele o `button:hover` geral pinta a etiqueta
   de vermelho da marca, que aqui significa outra coisa. */
.recorte-etiqueta:hover {
  background: var(--fundo-cartao);
  border-color: var(--dado);
  color: var(--dado);
}
.recorte-etiqueta.sem-acao { cursor: default; font-weight: 400; color: var(--texto-suave); }
.recorte-x { font-size: 14px; line-height: 1; opacity: .6; }
.recorte-etiqueta:hover .recorte-x { opacity: 1; }
.recorte-conta { margin-left: auto; color: var(--texto-suave); font-size: 12px; }
.recorte-conta strong { color: var(--brand); }
@media (max-width: 560px) {
  .recorte-conta { margin-left: 0; flex-basis: 100%; }
}

/* Histórico anterior ao sistema, na aba Alunos: recolhido por padrão,
   como o painel de mudanças — consulta-se quando precisa. */
.painel-importacoes { margin-bottom: 16px; }
.painel-importacoes > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 18px;
}
.painel-importacoes > summary::-webkit-details-marker { display: none; }
.painel-importacoes > summary::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.painel-importacoes[open] > summary::before { transform: rotate(45deg); margin-top: -7px; }
.painel-importacoes[open] > summary { margin-bottom: 10px; }
.lista-importacoes { list-style: none; margin: 0; padding: 0; }
.importacao-historico { padding: 10px 0; border-top: 1px solid var(--borda); }
.importacao-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.documentos-historico { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.documentos-historico li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Botão pequeno de ação que apaga: contorno e texto em vermelho, fundo do
   cartão. O "risco" cheio (fundo cinza) com o texto suave do botão mini
   ficava ilegível. */
.botao-mini.risco {
  background: var(--fundo-cartao);
  color: var(--tarde);
  border-color: var(--tarde);
}
.botao-mini.risco:hover { color: #fff; background: var(--tarde); border-color: var(--tarde); }

/* Conferência da leitura de digitalizações: tabela editável compacta. O
   campo duvidoso ganha o mesmo contorno vermelho da tabulação; linha
   desmarcada fica apagada, mas visível. */
.tabela-conferencia td { padding: 3px 4px; vertical-align: middle; }
.tabela-conferencia input[type=text],
.tabela-conferencia input[type=date] { margin: 0; padding: 5px 6px; font-size: 13px; min-width: 0; }
.tabela-conferencia td.duvida input {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: #FFF5F5;
}
.tabela-conferencia tr.desmarcada td:not(:first-child) { opacity: .45; }

/* ------------------------------------------------ em sala (campo.js)
   Lista assinada, avaliações e fotos pela câmera, e o QR da avaliação.
   No computador, quatro botões em linha; no celular, dois por linha,
   grandes para o polegar. A conferência da presença ocupa a tela toda no
   celular, com o Gravar preso no pé. */
.cartao-campo .acoes-campo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acao-campo {
  display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left;
  min-height: 92px; padding: 12px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--fundo-cartao); color: var(--texto);
  font: inherit; cursor: pointer;
}
.acao-campo svg { width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 1.8; margin-bottom: 2px; }
.acao-campo strong { font-size: 14px; line-height: 1.25; }
.acao-campo span { font-size: 12px; color: var(--texto-suave); line-height: 1.3; }
.acao-campo.forte { background: var(--brand); border-color: var(--brand); color: #fff; }
.acao-campo.forte svg { stroke: #fff; }
.acao-campo.forte span { color: rgba(255,255,255,.88); }
.acao-campo:hover { border-color: var(--brand); }
.cartao-campo .aviso { margin: 10px 0 0; }

.dialogo-campo { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); display: none; }
.dialogo-campo[open] { display: flex; flex-direction: column; }
.dialogo-campo .topo-campo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 16px 18px 8px; }
.dialogo-campo .topo-campo h3 { padding: 0; margin: 0; }
.dialogo-campo .topo-campo span { font-size: 12px; color: var(--texto-suave); }
.dialogo-campo .corpo-campo { flex: 1; overflow-y: auto; padding: 4px 18px 12px; display: grid; gap: 8px; align-content: start; }
.dialogo-campo .pe-campo { border-top: 1px solid var(--borda); padding: 12px 18px 16px; display: grid; gap: 8px; }
.dialogo-campo .pe-campo .linha-botoes { justify-content: flex-end; }
.pessoa-campo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-cartao);
}
.pessoa-campo .quem { display: grid; gap: 2px; min-width: 0; }
.pessoa-campo .quem strong { font-size: 14px; overflow-wrap: anywhere; }
.pessoa-campo .quem span { font-size: 12px; color: var(--texto-suave); }
.pessoa-campo.falta { border-color: var(--brand); }
.pessoa-campo.decidir { border-style: dashed; }
.alterna-campo { display: flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.alterna-campo button {
  border: 0; border-radius: 0; margin: 0; padding: 9px 12px; min-height: 40px;
  background: transparent; color: var(--texto-suave); font: 600 13px var(--corpo); cursor: pointer;
}
.alterna-campo button.sim { background: #1C7343; color: #fff; }
.alterna-campo button.nao { background: var(--brand); color: #fff; }
.pessoa-campo.extra { cursor: pointer; border-style: dashed; }
.incluir-campo { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.incluir-campo input { width: 20px; height: 20px; margin: 0; }
.grupo-extra { display: grid; gap: 8px; margin-top: 6px; }
.rotulo-extra { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }

@media (max-width: 760px) {
  .cartao-campo .acoes-campo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acao-campo { min-height: 104px; }
  .dialogo-campo { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .dialogo-campo .pe-campo { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .dialogo-campo .pe-campo .linha-botoes button { flex: 1; min-height: 46px; }
}

/* .versao-sistema virou .rodape-versao dentro do rodapé padrão (05/11/2026). */

/* ------------------------------------------------------- Hoje (hoje.js)
   A primeira tela no celular: turmas de hoje, as que devem a lista
   assinada e as dos próximos dias, cada uma com a câmera ali mesmo. */
.tela-hoje { display: grid; gap: 18px; }
.cabecalho-hoje { display: grid; gap: 2px; }
.cabecalho-hoje h1 { font-family: var(--titulo); font-size: 26px; margin: 0; }
.cabecalho-hoje .explica::first-letter { text-transform: uppercase; }
.grupo-hoje { display: grid; gap: 10px; }
.grupo-hoje h2 { font-family: var(--titulo); font-size: 18px; font-weight: 500; margin: 0; }
.cartao-hoje { display: grid; gap: 8px; margin: 0; }
.cartao-hoje h3 { font-family: var(--titulo); font-size: 18px; margin: 0; line-height: 1.2; }
.cartao-hoje .acoes-campo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.cartao-hoje .aviso { margin: 4px 0 0; }
.selo-hoje {
  justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--fundo-suave); color: var(--texto-suave); border: 1px solid var(--borda);
}
.selo-hoje.agora { background: #1C7343; border-color: #1C7343; color: #fff; }
.selo-hoje.devendo { background: transparent; border-color: var(--brand); color: var(--brand); }
.cartao-hoje.agora { border-color: #1C7343; }
.linha-hoje { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rodape-hoje { display: grid; gap: 8px; }
.rodape-hoje button { width: 100%; min-height: 44px; }

/* Aviso de versão nova (main.js): preso no pé, acima da barra do iPhone. */
.faixa-versao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--cinza); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}
.faixa-versao button { background: var(--brand); border-color: var(--brand); color: #fff; min-height: 40px; padding: 0 18px; }

/* ======================================================= o app no celular
   Ajustes só para tela de telefone (Paulo, 22/10/2026: "caber dentro do
   celular sem distorções"). No computador nada muda. */

/* A legenda da trilha só existe no celular. */
.trilho-legenda { display: none; }

@media (max-width: 760px) {
  /* Barra de cima em duas linhas: marca, voltar, busca e atualizar em
     cima; Minha senha e Sair embaixo, à direita. A barra tinha altura
     fixa e os botões caíam por cima das abas. O tema segue o aparelho. */
  .barra {
    height: auto; min-height: 52px; flex-wrap: wrap; gap: 4px 8px;
    padding-top: max(6px, env(safe-area-inset-top, 0px)); padding-bottom: 6px;
  }
  .barra::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  /* A regra antiga quebrava a linha logo depois da marca; agora o espaço
     só empurra busca e atualizar para a direita, na mesma linha. */
  .barra .empurra { flex: 1 1 0; flex-basis: 0; height: auto; }
  #botao-instalar, #botao-avisos { order: 2; }
  #botao-senha { order: 3; margin-left: auto; }
  #botao-sair { order: 4; }
  #botao-tema { display: none; }
  .barra .so-icone { min-width: 40px; min-height: 40px; }

  /* A trilha da turma: só os pontos, e a etapa escrita por extenso
     embaixo. Nove nomes em 340 px viravam sílabas soltas. */
  .etapa-turma-nome { display: none; }
  .trilho-legenda {
    display: block; grid-column: 1 / -1; margin: 6px 0 0; text-align: center;
    font-size: 13px; font-weight: 600; color: var(--texto);
  }
}

@media (max-width: 640px) {
  /* Tabela vira lista de cartões: uma linha por registro, o título da
     coluna ao lado de cada valor. Antes, cinco colunas espremidas em 340
     px quebravam nomes e telefones e escondiam a última coluna. */
  .rolagem:has(> table.tabela-cartoes) { overflow-x: visible; }
  table.tabela-cartoes, table.tabela-cartoes tbody { display: block; width: 100%; min-width: 0; }
  table.tabela-cartoes thead { display: none; }
  table.tabela-cartoes tbody { display: grid; gap: 8px; }
  table.tabela-cartoes tr {
    display: grid; gap: 3px; padding: 10px 12px;
    border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-cartao);
  }
  table.tabela-cartoes td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    height: auto; padding: 1px 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere;
  }
  table.tabela-cartoes td::before {
    content: attr(data-rotulo); flex: none; max-width: 45%;
    text-align: left; font-size: 12px; color: var(--texto-suave);
  }
  table.tabela-cartoes td[data-rotulo=""]::before { display: none; }
  /* A primeira coluna é o nome do registro: vira o título do cartão. */
  table.tabela-cartoes td:first-child {
    display: block; text-align: left; font-size: 15px; font-weight: 600; padding-bottom: 4px;
  }
  table.tabela-cartoes td:first-child::before { display: none; }
  table.tabela-cartoes td:first-child .explica,
  table.tabela-cartoes td:first-child span > span { display: block; font-weight: 400; font-size: 12px; margin: 2px 0 0; }
  table.tabela-cartoes td.acoes { display: block; text-align: left; padding-top: 6px; }
  table.tabela-cartoes td.acoes::before { display: none; }
  table.tabela-cartoes td.acoes .linha-botoes { justify-content: flex-start !important; }
}

/* Ação já feita (Hoje): bolinha verde no canto superior direito. */
.acao-campo { position: relative; }
.ponto-feito {
  position: absolute; top: 9px; right: 9px; width: 11px; height: 11px; border-radius: 50%;
  background: #1C9A55; box-shadow: 0 0 0 2px var(--fundo-cartao);
}
.acao-campo.forte .ponto-feito { box-shadow: 0 0 0 2px #fff; }

/* ---------------------------------------------- foto do instrutor (fotos.js) */
.foto-instrutor { flex: none; display: inline-block; border-radius: 50%; object-fit: cover; background: var(--fundo-suave); }
.foto-instrutor.sem-foto {
  display: inline-grid; place-items: center; font-family: var(--titulo); font-weight: 600;
  color: var(--texto-suave); border: 1px solid var(--borda);
}
.com-foto { display: inline-flex; align-items: center; gap: 8px; }

/* -------------------------------------------------- Feedback (feedback.js) */
.tela-feedback { display: grid; gap: 14px; }
.tela-feedback h1 { font-family: var(--titulo); font-size: 24px; margin: 0; line-height: 1.15; }
.perfil-feedback { display: flex; align-items: center; gap: 14px; }
.cartao-feedback { display: grid; gap: 10px; margin: 0; }
.cartao-feedback h3 { margin: 0; font-size: 16px; }
.nota-grande { display: flex; align-items: baseline; gap: 6px; }
.nota-grande strong { font-family: var(--titulo); font-size: 44px; line-height: 1; color: #1C7343; }
.nota-grande span { color: var(--texto-suave); font-size: 13px; }
.tres-feedback { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.tres-feedback div { background: var(--fundo-suave); border-radius: var(--raio); padding: 8px 10px; display: grid; gap: 2px; }
.tres-feedback strong { font-family: var(--titulo); font-size: 22px; }
.tres-feedback span { font-size: 12px; color: var(--texto-suave); }
.linha-feedback {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--borda); border-radius: 0; padding: 10px 0; color: var(--texto); font: inherit; cursor: pointer;
}
.linha-feedback span { display: grid; gap: 2px; min-width: 0; }
.linha-feedback span span { font-size: 12px; color: var(--texto-suave); }
.linha-feedback b { font-family: var(--titulo); font-size: 20px; color: #1C7343; }
.comentario-feedback { margin: 0; padding: 8px 10px; border-radius: var(--raio); background: var(--fundo-suave); border-left: 3px solid #1C7343; font-size: 14px; }
.comentario-feedback.melhorar { border-left-color: #C98A12; }
.selo-do-mes {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--raio);
  background: #FFF4D6; color: #6B4A00; font-weight: 700; font-size: 14px;
}
.selo-do-mes span { width: 24px; height: 24px; border-radius: 50%; background: #F2B826; flex: none; }

/* -------------------------------------------- instrutor do mês (qualidade.js) */
.instrutor-do-mes .cabecalho-cartao { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------- a lista de turmas cabe na tela
   Paulo (22/10/2026): "todas as colunas dentro da dimensão da tela, não quero
   rolar a barra para o lado". Sem rolagem própria: as células quebram linha,
   a etapa e os botões empilham, e as margens laterais encolhem. Só acima do
   celular — no celular a tabela já vira cartões. */
@media (min-width: 641px) {
  .lista-turmas .rolagem { overflow-x: visible; }
  .lista-turmas table { width: 100%; table-layout: auto; font-size: 13px; }
  .lista-turmas th, .lista-turmas td { padding: 6px 7px; height: auto; white-space: normal; overflow-wrap: break-word; }
  .lista-turmas td:first-child { white-space: nowrap; }
  .lista-turmas th { white-space: nowrap; }
  .lista-turmas td:nth-child(3) { min-width: 150px; }
  .lista-turmas .celula-etapa { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .lista-turmas .etiqueta { white-space: nowrap; }
  .lista-turmas td.acoes { width: 1%; }
  .lista-turmas td.acoes .linha-botoes { flex-direction: column; align-items: stretch; gap: 4px; }
  .lista-turmas td.acoes button { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  /* Tela estreita: o "(2d)" da data desce para a linha de baixo. */
  .lista-turmas td:first-child { white-space: normal; min-width: 76px; }
  .lista-turmas td:nth-child(3) { min-width: 130px; }
}

/* ------------------------------------- o instrutor na turma (indices-instrutor.js) */
.instrutores-da-turma { display: grid; gap: 14px; }
.instrutor-da-turma { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-suave); }
.cabeca-instrutor { display: flex; align-items: center; gap: 14px; }
.papel-instrutor { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.nome-instrutor { display: block; font-family: var(--titulo); font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--texto); }
.indices-instrutor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .indices-instrutor { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nome-instrutor { font-size: 20px; } }
.indice-instrutor { display: grid; gap: 1px; align-content: start; padding: 8px 10px; border-radius: var(--raio); background: var(--fundo-cartao); border: 1px solid var(--borda); }
.indice-instrutor span { font-size: 11px; color: var(--texto-suave); }
.indice-instrutor strong { font-family: var(--titulo); font-size: 20px; line-height: 1.2; }
.indice-instrutor small { font-size: 11px; color: var(--texto-suave); line-height: 1.3; }
.indice-instrutor.atencao { border-color: var(--brand); }
.indice-instrutor.atencao strong { color: var(--brand); }

/* Checklist OK da preparação (turmas.js). */
.checklist-ok { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.checklist-ok button[disabled] { opacity: .5; cursor: not-allowed; }

/* Relatório ao cliente, dentro de Evidências (turmas.js). */
.bloco-relatorio { background: var(--fundo-suave); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 14px; margin: 0 0 14px; }
.bloco-relatorio .cabecalho-cartao { margin-bottom: 6px; flex-wrap: wrap; }
.bloco-relatorio h4 { margin: 0; font: 600 14px var(--titulo); letter-spacing: .01em; }
.conferencia-relatorio { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.conferencia-relatorio li { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
.conferencia-relatorio li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde); transform: translateY(-1px); }
.conferencia-relatorio li.falta { color: var(--texto-suave); }
.conferencia-relatorio li.falta::before { background: var(--controle); }
.bloco-relatorio .aviso { margin-top: 8px; }

/* Janela "PDF pronto" (certificado.js → baixar): os links têm cara de botão. */
.janela-arquivos .explica { margin: 4px 0 12px; }
.lista-arquivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 55vh; overflow-y: auto; }
.lista-arquivos li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid var(--borda); }
.lista-arquivos li:first-child { border-top: 0; }
.lista-arquivos .nome-arquivo { font-size: 13px; color: var(--texto-suave); min-width: 0; overflow-wrap: anywhere; flex: 1 1 180px; }
a.botao-link { display: inline-block; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 1px solid transparent;
  background: var(--brand); color: #fff; text-decoration: none; line-height: 1.2; }
a.botao-link:hover { background: var(--brand-forte); }
a.botao-link.vazio { background: transparent; color: var(--texto); border-color: var(--borda); }
a.botao-link.vazio:hover { background: var(--fundo-suave); }

/* ------------------------------------------- fechamento (fechamento.js) */
.numeros-fech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.numeros-fech > div { background: var(--fundo-suave); border-radius: var(--raio); padding: 10px 12px; display: grid; gap: 2px; }
.numeros-fech b { font: 600 24px/1.1 var(--titulo); font-variant-numeric: tabular-nums; }
.numeros-fech span { font-size: 12.5px; color: var(--texto-suave); }
.numeros-fech .ok b { color: var(--ok-ink); }
.numeros-fech .falta b { color: var(--aviso-ink); }
@media (max-width: 640px) { .numeros-fech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.legenda-fech { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-suave); margin-bottom: 8px; }
.legenda-fech span { display: inline-flex; gap: 6px; align-items: center; }
.trilho-fech { display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.trilho-fech i, .legenda-fech i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.trilho-fech i.s, .legenda-fech i.s { background: var(--verde); }
.trilho-fech i.n, .legenda-fech i.n { background: var(--aviso-bg); box-shadow: inset 0 0 0 1.5px var(--laranja); }
.trilho-fech i.x, .legenda-fech i.x { background: var(--fundo-suave); box-shadow: inset 0 0 0 1px var(--controle); }
.trilho-fech em { font-style: normal; font-size: 12px; color: var(--texto-suave); margin-left: 6px; }

.sit-celula { display: inline-grid; gap: 3px; justify-items: start; }
.sit-fech { display: inline-flex; align-items: center; font-weight: 600; font-size: 12.5px; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.sit-fech.ok { background: var(--ok-bg); color: var(--ok-ink); }
.sit-fech.falta { background: var(--aviso-bg); color: var(--aviso-ink); }
.tabela-fechamento tr.aberta td, .tabela-fechamento tr.linha-detalhe-fech td { background: var(--fundo-suave); }

.detalhe-fech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .detalhe-fech { grid-template-columns: minmax(0, 1fr); } }
.lado-fech { display: grid; gap: 4px; align-content: start; min-width: 0; }
.lado-fech h4 { margin: 0 0 4px; font: 600 13.5px var(--titulo); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.area-fech { font: 600 10.5px var(--corpo); letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 9px; color: #fff; }
.area-fech.ped { background: var(--marca-ped); }
.area-fech.com { background: var(--marca-com); }
.item-fech { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--regua); text-align: left; }
.item-fech:last-child { border-bottom: 0; }
.item-fech .m { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 700; transform: translateY(2px); }
.item-fech.s .m { background: var(--verde); color: #fff; }
.item-fech.n .m { background: var(--aviso-bg); color: var(--aviso-ink); box-shadow: inset 0 0 0 1.5px var(--laranja); }
.item-fech.x .m { background: var(--fundo-suave); color: var(--texto-suave); }
.item-fech small { color: var(--texto-suave); font-size: 11.5px; text-align: right; }
.item-fech.n small { color: var(--aviso-ink); font-weight: 600; }
.item-fech.x { color: var(--texto-suave); }

@media (max-width: 640px) {
  /* No celular a linha de itens ocupa o cartão inteiro, sem rótulo. */
  table.tabela-fechamento tr.linha-detalhe-fech td { display: block; text-align: left; }
  table.tabela-fechamento tr.linha-detalhe-fech td::before { display: none; }
  .item-fech small { white-space: normal; }
}
.tabela-fechamento td .explica { display: block; margin: 2px 0 0; font-size: 12px; }
.tabela-fechamento td { vertical-align: middle; }
.tabela-fechamento th, .tabela-fechamento td { padding-left: 8px; padding-right: 8px; }
.trilho-fech { flex-wrap: wrap; row-gap: 4px; }

/* Janela do QR da avaliação (campo.js): grande, para mostrar na sala. */
dialog.janela-qr { width: min(440px, calc(100vw - 24px)); }
.janela-qr .corpo { text-align: center; padding-top: 18px; }
.janela-qr h3 { padding: 0; margin: 4px 0 2px; font-size: 18px; }
.janela-qr .rotulo-qr { font: 600 12px var(--corpo); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0; }
.janela-qr .turma-qr { font-weight: 600; margin: 0 0 8px; }
.janela-qr img { width: 100%; max-width: 340px; height: auto; display: block; margin: 10px auto; background: #fff; border-radius: 8px; }
.cartao-hoje .link-dados-turma { margin-top: 8px; width: 100%; }

/* Evidências excluídas, com a justificativa (turmas.js). */
.excluidas-evidencia { margin-top: 10px; font-size: 13px; }
.excluidas-evidencia summary { cursor: pointer; color: var(--texto-suave); font-weight: 600; }
.excluidas-evidencia ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }

/* Buscar nome pelo CPF, dentro das janelas (nucleo.js). */
.campo-com-botao { display: flex; gap: 8px; align-items: stretch; }
.campo-com-botao input { flex: 1 1 auto; min-width: 0; }
.campo-com-botao button { flex: none; white-space: nowrap; }
.resposta-cpf { margin-top: 8px; display: grid; gap: 6px; justify-items: start; font-size: 13px; }
.resposta-cpf button { text-align: left; white-space: normal; }
.resposta-cpf .ok-cpf { color: var(--ok-ink); font-weight: 600; }
.resposta-cpf .erro-cpf { color: var(--falha-ink); }

/* Ponto vermelho: nome lido da lista de presença sem 100% de certeza
   (24/10/2026). Só orientação para quem confere a folha. */
.ponto-duvida,
.pessoa-campo .quem span.ponto-duvida {
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: middle;
  flex: none;
}
.legenda-duvida { display: flex; align-items: center; gap: 0; }
.legenda-duvida .ponto-duvida { margin: 0 8px 0 0; }

/* Campo obrigatório no diálogo (24/10/2026) e o problema que impede salvar. */
.marca-obrigatorio { color: var(--brand); font-weight: 600; }
.problema-dialogo { margin: 14px 0 0; }

/* ------------------------------------------------ logística (24/10/2026)
   Separação, saída e retorno do material pelos QR Codes da ficha técnica.
   Feita para o celular: alvo de toque grande, uma coluna. */
.aviso.alerta { background: #fbf2dc; border-color: #ecd9a3; color: #6e4c00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .aviso.alerta { background: #3a2e12; border-color: #6b5520; color: #f0d68f; }
}
:root[data-tema="escuro"] .aviso.alerta { background: #3a2e12; border-color: #6b5520; color: #f0d68f; }
.lg { max-width: 640px; margin: 0 auto; }
.lg-voltar { margin: 0 0 10px; }
.lg-rotulo { font-family: Oswald, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .06em;
  color: var(--brand); text-transform: uppercase; margin: 0 0 4px; }
.lg-titulo { margin: 0 0 2px; font-size: 21px; line-height: 1.2; }
.lg-sub { color: var(--texto-suave); font-size: 14px; margin: 0 0 12px; }
.lg-ficha { background: var(--fundo-suave, rgba(127,127,127,.08)); border-radius: 10px; padding: 10px 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.lg-ficha small { display: block; font-size: 10px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.lg-ficha b { font-weight: 600; overflow-wrap: anywhere; }
.lg-turma { display: grid; gap: 4px; width: 100%; text-align: left; padding: 12px 14px; margin: 0 0 10px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-cartao, transparent); color: var(--texto);
  font: inherit; cursor: pointer; }
.lg-turma strong { font-size: 15px; }
.lg-turma > span { font-size: 13px; color: var(--texto-suave); }
.lg-turma .lg-proxima { color: var(--brand); font-weight: 600; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.lg-chip { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--borda); color: var(--texto-suave); }
.lg-chip.ok { background: #e6f3eb; border-color: #b9dcc6; color: #145a33; }
.lg-chip.pend { background: #fbf2dc; border-color: #ecd9a3; color: #6e4c00; }
.lg-etapas { margin: 4px 0; }
.lg-etapa { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lg-etapa:last-child { border-bottom: none; }
.lg-etapa p { margin: 2px 0 0; font-size: 13px; color: var(--texto-suave); line-height: 1.4; }
.lg-etapa p.lg-alerta { color: #9a6b00; font-weight: 600; }
.lg-bola { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  font-size: 13px; color: #fff; background: #bdb7b1; }
.lg-bola.ok { background: #1e7a46; }
.lg-bola.pend { background: #9a6b00; }
.lg-abrir { margin-top: 8px; }
.lg-reabrir { margin-top: 6px; }
.lg-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.lg-tabela th { font-size: 10px; text-transform: uppercase; color: var(--texto-suave); text-align: left; padding: 6px 4px;
  border-bottom: 1px solid var(--borda); }
.lg-tabela td { padding: 7px 4px; border-bottom: 1px solid var(--borda); }
.lg-tabela .c { text-align: center; }
.lg-v { color: #1e7a46; font-weight: 700; }
.lg-x { color: #9a6b00; font-weight: 700; }
.lg-da-log { font-size: 11px; color: var(--texto-suave); }
.lg-itens { margin: 6px 0 4px; }
.lg-item { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--borda); font-size: 15px; min-height: 48px; }
.lg-item.falta { background: #fbf2dc; color: #4a3500; margin: 0 -10px; padding-left: 12px; padding-right: 12px; }
.lg-caixa { width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 7px; border: 2px solid #9a948f;
  background: transparent; color: #fff; font-size: 17px; line-height: 1; flex: none; display: grid; place-items: center; }
.lg-caixa.marcada { background: #1e7a46; border-color: #1e7a46; }
.lg-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lg-nome small { color: var(--texto-suave); font-size: 11px; }
.lg-q { display: flex; align-items: center; gap: 4px; flex: none; font-size: 13px; }
.lg-q small { color: var(--texto-suave); white-space: nowrap; }
.lg-q input { width: 60px; min-height: 38px; text-align: center; font-size: 16px; font-weight: 600; padding: 4px; }
.lg-tirar { min-height: 34px; padding: 0 10px; font-size: 18px; flex: none; }
.lg-mais { margin: 8px 0 0; }
.lg-todos { margin-top: 10px; }
.lg-obs, .lg-em-nome { width: 100%; font: inherit; font-size: 15px; }
.lg .aviso.alerta { margin-top: 10px; }
.lg-encerrar { margin-top: 12px; }
.lg-encerrar.alerta { background: #9a6b00; border-color: #9a6b00; }
.lg-quem { font-size: 12.5px; color: var(--texto-suave); text-align: center; margin: 10px 0 0; }
.lg-grupo h3 { font-size: 15px; margin: 0 0 6px; }
.lg-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); }
.lg-cat:last-child { border-bottom: none; }
.lg-cat small { color: var(--texto-suave); }
.lg-cat.inativo > span { color: var(--texto-suave); text-decoration: line-through; }
.bloco-logistica { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 10px; }
/* Banco de materiais por área e kits por treinamento (24/10/2026). */
.lg-conta { color: var(--texto-suave); font-family: Montserrat, sans-serif; font-weight: 500; font-size: 12px; }
.lg-cat-botao { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--borda); border-radius: 0;
  color: var(--texto); font: inherit; text-align: left; cursor: pointer; min-height: 46px; }
.lg-cat-botao small { color: var(--texto-suave); white-space: nowrap; }
.lg-cat-botao small.lg-tem-kit { color: #1e7a46; font-weight: 600; }
.lg-item.no-kit { background: #e6f3eb; margin: 0 -10px; padding-left: 12px; padding-right: 12px; }
/* Logística: cartões e caixas são botões, e herdavam o vermelho forte do
   hover dos botões principais, que apagava o texto (Paulo, 24/10/2026).
   Aqui o hover é um vermelho claro, com o texto na cor normal. */
.lg-turma:hover, .lg-cat-botao:hover { background: #fdeeee; border-color: #f0b8ba; color: var(--texto); }
.lg-caixa:hover { background: #fdeeee; border-color: var(--brand); }
.lg-caixa.marcada:hover { background: #18663a; border-color: #18663a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .lg-turma:hover, :root:not([data-tema="claro"]) .lg-cat-botao:hover,
  :root:not([data-tema="claro"]) .lg-caixa:not(.marcada):hover { background: rgba(236, 32, 36, .14); border-color: rgba(236, 32, 36, .45); }
}
:root[data-tema="escuro"] .lg-turma:hover, :root[data-tema="escuro"] .lg-cat-botao:hover,
:root[data-tema="escuro"] .lg-caixa:not(.marcada):hover { background: rgba(236, 32, 36, .14); border-color: rgba(236, 32, 36, .45); }
/* Áreas recolhíveis do catálogo e do kit. */
.lg-grupo details.secao > summary { font-family: Oswald, sans-serif; font-size: 16px; }
.lg-grupo details.secao[open] > summary { margin-bottom: 6px; }
.lg-mais-area { margin-top: 10px; }
/* Kit: quantidade e regra lado a lado; a simulação embaixo do nome. */
.lg-kit-linha { flex-wrap: nowrap; cursor: pointer; }
.lg-kit-regra { display: flex; align-items: center; gap: 6px; flex: none; }
.lg-kit-regra input { width: 58px; min-height: 38px; text-align: center; font-size: 16px; font-weight: 600; padding: 4px; }
.lg-kit-regra select { min-height: 38px; font-size: 14px; max-width: 160px; }
.lg-simula { display: block; color: #1e7a46; font-weight: 600; font-size: 12px; }
.lg-simulador { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 14px;
  text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto); }
.lg-simulador input { width: 70px; min-height: 38px; text-align: center; font-size: 16px; }

/* Seção Logística da turma: três linhas, uma por etapa. */
.lg-resumo { list-style: none; margin: 0; padding: 0; }
.lg-resumo li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.lg-resumo li:last-child { border-bottom: none; }
.lg-resumo li > span:last-child { color: var(--texto-suave); }
.lg-resumo li strong { color: var(--texto); }
.lg-marca { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; background: #bdb7b1; }
.lg-resumo li.ok .lg-marca { background: #1e7a46; }
.lg-resumo li.pend .lg-marca { background: #9a6b00; }
.lg-retirados { margin: 8px 0 0; font-size: 13px; color: var(--texto-suave); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.lg-retirado { display: inline-flex; align-items: center; gap: 4px; }
.lg-retirado button { text-decoration: none; min-height: 30px; padding: 0 8px; font-size: 12px; }
.lg-retirado.do-pedagogico { color: #9a6b00; }
.lg-retirado small { text-decoration: none; }
/* Alertas da logística (24/10/2026). */
.lg-alertas { display: grid; gap: 8px; }
.lg-alerta-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 8px; border-top: 1px solid rgba(154, 107, 0, .25); }
.lg-alertas > .lg-alerta-linha:first-child { border-top: none; padding-top: 0; }
.lg-alerta-linha p { margin: 2px 0 0; font-size: 13px; }
.lg-alerta-linha .linha-botoes button { min-height: 36px; }
.lg-tem-alerta { color: #9a6b00 !important; font-weight: 600; }
.faixa-logistica { margin: 0 0 16px; }
/* Alterações graves (24/10/2026): controle interno. */
.bloco-alteracoes { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--borda); }
.bloco-alteracoes .cabecalho-cartao strong { font-size: 15px; }
.dois-lados-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.filtro-alteracoes { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; color: var(--texto-suave); margin: 0; }
.filtro-alteracoes select { min-height: 36px; font-size: 14px; }
/* Kit: os outros grupos, recolhidos embaixo do grupo do curso (24/10/2026). */
.lg-outros { margin: 12px 0; padding: 10px 14px; border: 1px dashed var(--borda); border-radius: 12px; }
.lg-outros > summary, .lg-outro-grupo > summary { cursor: pointer; font-family: Oswald, sans-serif; font-size: 15px; padding: 6px 0; }
.lg-outros[open] > summary { margin-bottom: 4px; }
.lg-outro-grupo { padding: 2px 0 2px 10px; border-top: 1px solid var(--borda); }
/* Registro de certificados (25/10/2026). */
.filtros-registro { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.filtro-registro { display: grid; gap: 4px; margin: 0; font-size: 12px; }
.filtro-registro input, .filtro-registro select { min-height: 38px; font-size: 14px; }
.filtro-registro.marcar { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; }
.filtro-registro input[type="search"] { min-width: 220px; }
.riscado { text-decoration: line-through; color: var(--texto-suave); }
.filtro-registro input.curto { width: 90px; }
/* Reabrir etapa da logística (26/10/2026). */
.lg-resumo li .lg-reabrir-turma { margin-left: auto; flex: none; }
.lg-reaberturas p { margin: 2px 0 6px; font-size: 13px; color: var(--texto-suave); line-height: 1.45; }
.lg-reaberturas p strong { color: var(--texto); }
.lg-justificado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 8px; }
/* Alerta com atraso justificado: continua, sem urgência (26/10/2026). */
.lg-alerta-linha.atraso-justificado strong { color: var(--texto); }
.lg-alerta-linha.atraso-justificado p { font-style: italic; }

/* ------------------------------------------------ rotina do CT Safety
   Pop-up das 8h, 11h e 14h (rotina-ct.js) e o quadro dentro da turma. */
dialog.pop-rotina { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
dialog.pop-rotina:not([open]) { display: none; }
.rot-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--brand); color: #fff; }
.rot-hora { font-family: var(--titulo); font-weight: 600; font-size: 26px; line-height: 1; }
.rot-topo b { font-family: var(--titulo); font-weight: 500; font-size: 18px; display: block; }
.rot-topo small { font-size: 12px; opacity: .9; }
.rot-pendente { background: #FBF2DC; color: #6e4c00; font-size: 12.5px; font-weight: 600; padding: 7px 16px; }
.rot-total { background: #E6F3EB; color: #145a33; font-size: 13px; font-weight: 700; padding: 7px 16px; }
.rot-corpo { padding: 12px 16px 4px; overflow-y: auto; }
.rot-turma { padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--borda); }
.rot-turma:last-child { border-bottom: none; margin-bottom: 0; }
.rot-turma button.largo { margin-top: 10px; }
.rot-dados { background: var(--fundo-suave); border-radius: 10px; padding: 9px 11px; margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; }
.rot-dados strong { font-size: 13.5px; display: block; }
.rot-dados span { color: var(--texto-suave); }
.rot-destaque { background: #E6F3EB; color: #145a33; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 0 0 8px; }
.rot-destaque b { font-size: 15px; }
.rot-destaque.sem { background: #FBF2DC; color: #6e4c00; }
.rot-check { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.rot-check li { display: flex; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--borda); line-height: 1.35; }
.rot-check li:last-child { border-bottom: none; }
.rot-check li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px; border: 2px solid #9a948f; border-radius: 4px; }
.rot-pe { padding: 10px 16px 14px; border-top: 1px solid var(--borda); }
.rot-pe button.largo { margin-top: 0; }
.rot-pe p { font-size: 11.5px; color: var(--texto-suave); margin: 7px 0 0; text-align: center; }
.rot-linhas { list-style: none; margin: 0; padding: 0; }
.rot-linhas li { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 13px; align-items: baseline; }
.rot-linhas li:last-child { border-bottom: none; }
.rot-h { font-family: var(--titulo); font-size: 18px; }
.rot-ok { color: #1E7A46; font-weight: 600; }
.rot-pend { color: #9A6B00; font-weight: 600; }
.rot-fut { color: var(--texto-suave); }

/* Indicadores: intercorrências por tipo e por área (indicadores.js) */
.int-lista { list-style: none; margin: 0; padding: 0; }
.int-lista li { padding: 7px 0; border-bottom: 1px solid var(--borda); }
.int-lista li:last-child { border-bottom: none; }
.int-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 4px; }
.int-lista .barra-trilho { display: block; }
.int-lista small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--texto-suave); }

/* ==================================================================
   A LINHA DAS ÁREAS SEM NADA ABREVIADO
   ==================================================================
   Pedido do Paulo em 26/10/2026: "caber tudo sem abreviaturas". As
   quatro áreas tinham a mesma largura e o Pedagógico tem sete botões:
   "Registro de certificados", "Itens de despesa" e "Ocorrências graves"
   saíam cortados com reticências.

   Agora cada área tem a largura do próprio conteúdo, os botões ficam
   numa grade (.botoes-grupo, main.js) de três linhas em colunas da
   largura do texto, e as áreas se espalham pela coluna de 1200px. A
   simetria pedida em 20/10 continua: as quatro áreas têm as mesmas três
   linhas, então nome e botões caem na mesma altura em todas.
   Substitui as grades de colunas iguais dos blocos "A BARRA SUPERIOR,
   DISTRIBUIDA COM SIMETRIA" e "SIMETRIA DENTRO DOS GRUPOS". */

@media (min-width: 761px) {
  .linha-abas.linha-2 {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: space-between;
    gap: 12px 0;
  }
  .linha-abas.linha-2 .grupo-abas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 0 0 0 12px;
    border-right: 0;
  }
  /* O fio entre as áreas, e o marcador de cor ao lado do nome dela. */
  .linha-abas.linha-2 .grupo-abas + .grupo-abas {
    border-left: 1px solid var(--borda);
    padding-left: 24px;
  }
  .linha-abas.linha-2 .grupo-abas::before { top: 4px; transform: none; height: 14px; }
  .linha-abas.linha-2 .grupo-abas + .grupo-abas::before { left: 12px; }
  .linha-abas.linha-2 .rotulo-grupo { padding: 0 0 2px 7px; }

  .linha-abas.linha-2 .botoes-grupo {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: max-content;
    gap: 3px 6px;
  }
  .linha-abas.linha-2 .grupo-abas .botoes-grupo button {
    width: auto;
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Abaixo de 1120 as quatro não cabem lado a lado: duas por linha, em
   metades iguais, com o fio no meio. */
@media (min-width: 761px) and (max-width: 1120px) {
  .linha-abas.linha-2 {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    justify-content: stretch;
  }
  .linha-abas.linha-2 .grupo-abas:nth-child(odd) { border-left: 0; padding-left: 12px; }
  .linha-abas.linha-2 .grupo-abas:nth-child(odd)::before { left: 0; }
}

/* No telefone a faixa rola de lado: os botões voltam a ser uma fileira. */
@media (max-width: 760px) {
  .linha-abas.linha-2 .botoes-grupo { display: flex; flex-wrap: nowrap; gap: 0 8px; }
}

/* ------------------------------------------- prazos por etapa (migração 103)
   O relógio dentro da turma e a faixa do Início. */
.relogios-prazo { display: grid; gap: 8px; margin: 0 0 12px; }
.relogio-prazo { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: var(--fundo-suave); border-radius: 10px; padding: 10px 12px; }
.relogio-prazo .num { font-family: var(--titulo); font-weight: 600; font-size: 32px; line-height: 1; text-align: center; }
.relogio-prazo .num small { display: block; font-family: var(--corpo); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.relogio-prazo b { display: block; font-size: 13px; }
.relogio-prazo span { font-size: 12px; color: var(--texto-suave); }
.relogio-prazo.ok .num { color: #1E7A46; }
.relogio-prazo.vencendo { background: #FBF2DC; } .relogio-prazo.vencendo .num { color: #9A6B00; }
.relogio-prazo.estourado { background: #FBE4E2; } .relogio-prazo.estourado .num { color: #B3261E; }
.faixa-prazos.grave { border-color: #B3261E; background: #FBE4E2; }
.faixa-prazos .lg-alerta-linha small { display: block; color: var(--texto-suave); font-size: 12px; }

/* CPF mascarado nas telas (27/10/2026): botão discreto, clica para ver. */
.cpf { font-variant-numeric: tabular-nums; white-space: nowrap; }
button.cpf-mascarado { background: transparent; border: 1px dashed var(--borda); border-radius: 6px; padding: 2px 7px; font: inherit; font-size: 13px; color: var(--texto); cursor: pointer; min-height: 0; }
button.cpf-mascarado:hover { border-color: var(--texto-suave); background: var(--fundo-suave); }
button.cpf-mascarado.aberto { border-style: solid; }

/* ---------------------------------------- calendário (proposta de 27/10/2026)
   Hora na marca, botão Hoje e a lista por dia no celular. */
.marca-hora { font-size: 10px; font-weight: 700; color: var(--texto-suave); margin-right: 3px; font-variant-numeric: tabular-nums; }
.botao-hoje { font-weight: 700; }
.botao-hoje:disabled { opacity: .45; cursor: default; }
.lista-dia { display: grid; }
.dia-lista { display: grid; grid-template-columns: 50px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.dia-lista:last-child { border-bottom: none; }
.dia-lista.hoje .dia-num { color: var(--brand); }
.dia-num { font-family: var(--titulo); font-size: 20px; line-height: 1; }
.dia-num small { display: block; font-family: var(--corpo); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-top: 2px; }
.dia-turmas { display: grid; gap: 6px; min-width: 0; }
.dia-turmas .marca-feriado { font-size: 12px; color: var(--texto-suave); }
.turma-dia { display: block; width: 100%; text-align: left; background: var(--fundo-suave); border: 1px solid var(--borda); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; font: inherit; color: var(--texto); min-height: 0; }
.turma-dia.no-safety { border-left-color: var(--marinho); }
.turma-dia.no-cliente { border-left-color: var(--verde); }
.turma-dia.em-outro { border-left-color: var(--laranja); }
.turma-dia b { display: block; font-size: 13.5px; }
.turma-dia b .ponto-score { margin-right: 6px; }
.turma-dia span { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }

/* Zona de risco da turma e a ação de risco no rodapé do diálogo. */
.zona-risco { border: 1px dashed #B3261E; }
.zona-risco h3 { color: #B3261E; }
dialog .pe .acao-extra { margin-right: auto; border-style: dashed; }

/* Tabela dentro de cartão (27/10/2026, Paulo: "os itens à direita estão
   desalinhados"). A tabela sangra até a borda do cartão e a primeira e a
   última coluna ganham o mesmo recuo do cartão (18 px): assim o texto da
   primeira coluna começa onde começa o título, e o botão da última coluna
   termina onde termina o contador, o seletor e o resto do conteúdo.
   Só acima do celular — lá a tabela vira cartões. */
@media (min-width: 761px) {
  .cartao > .rolagem { margin-left: -18px; margin-right: -18px; }
  .cartao > .rolagem > table th:first-child,
  .cartao > .rolagem > table td:first-child { padding-left: 18px; }
  .cartao > .rolagem > table th:last-child,
  .cartao > .rolagem > table td:last-child { padding-right: 18px; }
}

/* Etiquetas por tema na lista de turmas e o bloco "Hoje" do Início
   (plano de usabilidade aprovado em 27/10/2026). */
.temas { display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; }
.etq-tema {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.25;
  padding: 2px 8px; border-radius: 12px; border: 0; min-height: 0; width: auto;
  cursor: pointer; text-align: left; white-space: normal;
}
.etq-tema::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.etq-tema.ok     { background: var(--ok-bg);    color: var(--ok-ink); }
.etq-tema.vence  { background: var(--aviso-bg); color: var(--aviso-ink); }
.etq-tema.atraso { background: var(--falha-bg); color: var(--falha-ink); }
.etq-tema.nao    { background: var(--fundo-suave); color: var(--texto-suave); }
.etq-tema.nao::before { opacity: .45; }
.etq-tema:hover  { filter: brightness(.94); }
.lista-turmas td.acoes .temas { max-width: none; }

.bloco-hoje .contas-hoje { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.conta-hoje { border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.2; }
.conta-hoje b { display: block; font-family: var(--titulo); font-weight: 600; font-size: 24px; line-height: 1; margin-bottom: 2px; }
.conta-hoje.sala   { background: #E8EAF6; color: var(--marinho); }
.conta-hoje.vence  { background: var(--aviso-bg); color: var(--aviso-ink); }
.conta-hoje.atraso { background: var(--falha-bg); color: var(--falha-ink); }
.conta-hoje.ct     { background: var(--ok-bg); color: var(--ok-ink); }
.conta-hoje.zero   { background: var(--fundo-suave); color: var(--texto-suave); }
.linha-hoje { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--borda); }
.linha-hoje > div { min-width: 0; flex: 1 1 260px; }
.linha-hoje strong { display: block; font-size: 13px; }
.linha-hoje small { display: block; color: var(--texto-suave); font-size: 12px; }
.linha-hoje.atraso strong { color: var(--falha-ink); }
.linha-hoje button { min-height: 36px; }
@media (max-width: 560px) {
  .bloco-hoje .contas-hoje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bloco-hoje .cabecalho-cartao { flex-wrap: wrap; }
  .bloco-hoje .cabecalho-cartao .painel-nota { width: 100%; }
}

/* Listas por partes (plano de usabilidade, etapa 3 — 27/10/2026). */
.rodape-partes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 0; font-size: 12.5px; color: var(--texto-suave); }
.rodape-partes button { min-height: 34px; }
.vazio-busca { margin-top: 6px; }
@media (min-width: 761px) {
  .cartao > .tabela-partes > .rolagem { margin-left: -18px; margin-right: -18px; }
  .cartao > .tabela-partes > .rolagem > table th:first-child,
  .cartao > .tabela-partes > .rolagem > table td:first-child { padding-left: 18px; }
  .cartao > .tabela-partes > .rolagem > table th:last-child,
  .cartao > .tabela-partes > .rolagem > table td:last-child { padding-right: 18px; }
}

/* ==================================================================
   BOAS-VINDAS — a tela que abre logo depois de entrar com senha
   ==================================================================
   Aprovada por Paulo em 04/11/2026 (docs/proposta-boas-vindas.html). A
   marca entra por animação com os arquivos brancos de marca/; é escura
   nos dois temas de propósito. Some com o botão, Enter ou Esc, e só
   aparece na entrada com senha — não a cada vez que o app é reaberto. */
.boas-vindas {
  position: fixed; inset: 0; z-index: 9000;
  display: flex;
  padding: 24px 16px;
  color: #F4F2F1;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(236, 32, 36, .22), transparent 70%),
    linear-gradient(180deg, #171717 0%, #0E0E0E 100%);
  overflow: hidden;
  transition: opacity .35s ease;
}
.boas-vindas.saindo { opacity: 0; pointer-events: none; }
.boas-vindas::before {
  content: ""; position: absolute; inset: -40%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 26px);
  animation: bv-deslizar 40s linear infinite;
  pointer-events: none;
}
@keyframes bv-deslizar { to { transform: translate(-80px, -80px); } }
.boas-vindas .bv-palco { position: relative; display: grid; justify-items: center; text-align: center; width: min(100%, 560px);
  margin: auto; max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  /* A animação faz o palco transbordar por instantes; sem isto a barra de
     rolagem piscava ao lado do nome (Paulo, 06/11/2026). A rolagem fica
     para telas muito baixas, mas sem barra. */
  scrollbar-width: none; }
.boas-vindas .bv-palco::-webkit-scrollbar { width: 0; height: 0; display: none; }
.boas-vindas .bv-marca { position: relative; height: 92px; width: 100%; max-width: 440px; }
.boas-vindas .bv-simbolo, .boas-vindas .bv-logotipo { position: absolute; top: 50%; translate: 0 -50%; height: 64px; }
.boas-vindas .bv-simbolo { left: calc(50% - 160px); opacity: 0; animation: bv-simbolo 1.1s cubic-bezier(.2,.8,.2,1) .25s forwards; }
.boas-vindas .bv-logotipo { left: calc(50% - 72px); height: 58px; opacity: 0; clip-path: inset(0 100% 0 0); animation: bv-logotipo .9s cubic-bezier(.2,.8,.2,1) 1.0s forwards; }
@keyframes bv-simbolo {
  from { opacity: 0; transform: translateX(-180px) rotate(-18deg) scale(.6); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; }
}
@keyframes bv-logotipo {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(10px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.boas-vindas .bv-fio { width: 0; height: 3px; background: #EC2024; margin: 6px auto 18px; animation: bv-fio .7s ease-out 1.7s forwards; }
@keyframes bv-fio { to { width: 180px; } }
.boas-vindas .bv-lema { font-family: var(--titulo); font-weight: 500; font-size: 15px; letter-spacing: .22em; color: #B8B2AF; opacity: 0; animation: bv-surge .6s ease-out 2.1s forwards; }
.boas-vindas .bv-lema strong { color: #EC2024; font-weight: 600; }
.boas-vindas .bv-ola { margin-top: 34px; opacity: 0; animation: bv-surge .7s ease-out 2.5s forwards; }
.boas-vindas .bv-saudacao { font-family: var(--titulo); font-weight: 400; font-size: 20px; letter-spacing: .04em; color: #B8B2AF; }
.boas-vindas .bv-nome { font-family: var(--titulo); font-weight: 600; font-size: 44px; line-height: 1.05; margin: 2px 0 6px; color: #F4F2F1; }
.boas-vindas .bv-papel { font-family: var(--corpo); font-size: 13px; color: #B8B2AF; letter-spacing: .06em; text-transform: uppercase; }
.boas-vindas .bv-iniciar {
  margin-top: 30px; opacity: 0; animation: bv-surge .6s ease-out 3.0s forwards;
  font-family: var(--titulo); font-weight: 600; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: #EC2024; border: 0; border-radius: 10px; padding: 16px 38px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(236, 32, 36, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.boas-vindas .bv-iniciar:hover, .boas-vindas .bv-iniciar:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(236, 32, 36, .45); outline: none; }
.boas-vindas .bv-iniciar .bv-seta { display: inline-block; margin-left: 10px; transition: transform .2s; }
.boas-vindas .bv-iniciar:hover .bv-seta { transform: translateX(4px); }
.boas-vindas .bv-dica { margin-top: 14px; font-family: var(--corpo); font-size: 12px; color: #B8B2AF; opacity: 0; animation: bv-surge .6s ease-out 3.4s forwards; }
.boas-vindas .bv-dica kbd { font-family: var(--corpo); border: 1px solid #3a3a3a; border-radius: 4px; padding: 1px 6px; font-size: 11px; }

/* O versículo do dia, no pé da abertura. Branco cheio sobre o fundo
   escuro e um filete acima: contraste de leitura, não enfeite. */
.boas-vindas .bv-vers { margin: 30px 0 0; padding-top: 22px; max-width: 430px; border-top: 1px solid #3a3a3a;
  opacity: 0; animation: bv-surge .6s ease-out 3.8s forwards; }
.boas-vindas .bv-vers-texto { margin: 0; font-family: var(--titulo); font-weight: 500; font-size: 17px; line-height: 1.5; color: #F4F2F1; }
.boas-vindas .bv-vers-ref { margin-top: 10px; font-family: var(--corpo); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #B8B2AF; }
@keyframes bv-surge { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .boas-vindas .bv-marca { height: 72px; }
  .boas-vindas .bv-simbolo { height: 48px; left: calc(50% - 122px); }
  .boas-vindas .bv-logotipo { height: 44px; left: calc(50% - 56px); }
  .boas-vindas .bv-nome { font-size: 34px; }
  .boas-vindas .bv-iniciar { font-size: 16px; padding: 15px 30px; width: 100%; }
  .boas-vindas .bv-vers { margin-top: 24px; padding-top: 18px; }
  .boas-vindas .bv-vers-texto { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .boas-vindas .bv-simbolo, .boas-vindas .bv-logotipo, .boas-vindas .bv-fio, .boas-vindas .bv-lema,
  .boas-vindas .bv-ola, .boas-vindas .bv-iniciar, .boas-vindas .bv-dica,
  .boas-vindas .bv-vers { animation: none; opacity: 1; clip-path: none; transform: none; }
  .boas-vindas .bv-fio { width: 180px; }
}

/* ==================================================================
   RODAPÉ PADRÃO — marca, lema, direitos e versão, em todas as páginas
   ==================================================================
   Pedido por Paulo em 05/11/2026. A marca usa as máscaras .simbolo e
   .logotipo, então sai na cor do tema; o lema no Oswald como no cabeçalho
   das peças. No celular as três partes empilham, centradas. */
.rodape-safety {
  margin-top: 36px;
  border-top: 1px solid var(--borda);
  background: var(--fundo-cartao);
  padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--texto-suave);
}
.rodape-marca { display: flex; align-items: center; gap: 7px; }
.rodape-marca .simbolo { width: 22px; display: inline-block; }
.rodape-marca .logotipo { width: 66px; display: inline-block; }
.rodape-lema { font-family: var(--titulo); font-weight: 500; font-size: 12px; letter-spacing: .2em; text-align: center; color: var(--texto-suave); }
.rodape-lema strong { color: var(--brand); font-weight: 600; }
.rodape-direitos { display: grid; justify-items: end; text-align: right; gap: 2px; line-height: 1.35; }
.rodape-versao { font-size: 11px; }
.rodape-versao:empty { display: none; }
/* A tela de boas-vindas por cima: a página de trás não rola nem mostra barra. */
body.bv-aberta { overflow: hidden; }
@media (max-width: 640px) {
  .rodape-safety { grid-template-columns: 1fr; justify-items: center; gap: 10px; text-align: center; padding-top: 16px; }
  .rodape-direitos { justify-items: center; text-align: center; }
}

/* O rodapé fica no pé da janela mesmo com pouco conteúdo: o corpo é uma
   coluna e a tela da vez (entrada, app, espera, folha) estica até ele.
   Antes, ao trocar de aba o conteúdo esvaziava por um instante e o rodapé
   subia para o meio da tela, depois descia (Paulo, 05/11/2026). */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#app { flex: 1 0 auto; }
main.folha { flex: 1 0 auto; width: 100%; }

/* Sem barra de rolagem visível na página (Paulo, 06/11/2026): a cada troca
   de aba o conteúdo passa de curto a comprido e a barra piscava à direita.
   A rolagem continua pela roda do mouse, pelo toque e pelo teclado; só a
   barra da página some. Caixas que rolam por dentro (diálogos, listas)
   continuam com a barra delas. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Rotina do CT: as ações do pop-up viraram caixas de marcar (07/11/2026). */
.rot-check li:has(input)::before { display: none; }
.rot-check li label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; width: 100%; text-transform: none; font-size: 13.5px; letter-spacing: 0; }
.rot-check li input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand); }
.rot-pe .rot-botoes { display: grid; gap: 8px; }

/* Conferência da importação de palestras (07/11/2026): cada linha é um
   formulário pequeno. No celular a tabela vira cartões (tabela-cartoes). */
.tabela-revisao td { vertical-align: middle; }
.tabela-revisao input[type="text"], .tabela-revisao input[type="date"], .tabela-revisao input[type="number"], .tabela-revisao select { min-width: 0; padding: 6px 8px; font-size: 13px; }
.tabela-revisao td:nth-child(3) input { min-width: 160px; }
.tabela-revisao td:nth-child(6) input { min-width: 140px; }

/* Contato inicial (10/11/2026) e atestado de brigada dentro de Certificados. */
.aviso-contato.atrasado { border-color: var(--brand); }
.lista-contatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-contatos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lista-contatos li button { text-align: left; }
.bloco-atestado { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.bloco-atestado h4 { margin: 0; }

/* Busca dentro de uma tabela (itens de despesa, 11/11/2026). */
.busca-tabela { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.busca-tabela input { flex: 1 1 220px; max-width: 420px; min-width: 0; }

/* Auditoria no pé de cada aba (11/11/2026). */
.faixa-auditoria { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin: 24px 0 8px; padding: 10px 12px; border: 1px dashed var(--borda); border-radius: 8px; }
.selo-auditada { cursor: help; }