/*
  Logaroo Pay — complemento de estilo das páginas geradas pelo servidor local
  (`ferramenta/web/servidor.py`).

  Por que este arquivo existe: as telas aprovadas (`ferramenta/web/telas/`) usam
  atributos `style="..."` e blocos `<style>` inline. O servidor manda o cabeçalho
  `Content-Security-Policy: default-src 'self'; script-src 'none'; ...`, que
  BLOQUEIA estilo inline (não há 'unsafe-inline'). Cada estilo inline das telas
  virou aqui uma classe, com os MESMOS valores — o visual continua o do
  protótipo; só mudou de lugar. `estilo.css` não é alterado.
*/

/* ---------- títulos de tela ---------- */
.titulo-tela { margin: 0 0 6px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px; }
.subtitulo-tela { margin: 0; font-size: 15px; color: var(--cor-tinta-fraca); }
.titulo-tela--celular { margin: 0 0 4px 0; font-size: 22px; font-weight: 600; letter-spacing: -0.4px; }
.subtitulo-tela--celular { margin: 0; font-size: 14px; color: var(--cor-tinta-fraca); line-height: 1.45; }

/* ---------- tela 1 — planilha ---------- */
.miolo-planilha { flex-grow: 1; display: flex; gap: 24px; padding: 32px; box-sizing: border-box; }
.coluna-principal { flex-grow: 1; display: flex; flex-direction: column; gap: 20px; }
.coluna-lateral { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 700px) {
  .miolo-planilha { flex-direction: column; padding: 20px 16px; }
  .coluna-lateral { width: 100%; }
}
.campo-data { width: 260px; max-width: 100%; }
.campo__ajuda--largo { max-width: 520px; }
.destaque-forte { font-weight: 600; color: var(--cor-tinta); }
.cartao-lateral { padding: 22px; }
.cartao-lateral__titulo { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.link-lateral { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; }
.checklist__icone { margin-top: 1px; }
.campo-arquivo__entrada { font-size: 13px; color: var(--cor-tinta-secundaria); max-width: 100%; }

/* ---------- telas 2 e 5 — miolo e estatísticas ---------- */
.miolo-validacao,
.miolo-acompanhamento { flex-grow: 1; padding: 28px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.stat-validacao { padding: 18px 20px; }
.stat-acompanhamento { padding: 16px 18px; }
@media (max-width: 700px) { .miolo-validacao, .miolo-acompanhamento { padding: 16px; } }
.valor-26 { font-size: 26px; }
.valor-26--apertado { letter-spacing: -0.5px; }
.texto-18 { font-size: 18px; font-weight: 600; }
.separador-ponto { color: #C7C0B6; font-weight: 400; }
.crescer { flex-grow: 1; }

/* ---------- tabela em grade (células) ---------- */
.tg-texto-numero { font-size: 13px; color: var(--cor-tinta-fraca); }
.tg-texto { font-size: 14px; }
.tg-texto-doc { font-size: 13px; color: var(--cor-tinta-secundaria); }
.tg-legenda { font-size: 12px; margin-top: 3px; }
.tg-legenda--atencao { color: #7A4900; }
.tg-legenda--erro { color: var(--cor-erro-texto); }
.tg-legenda--fraca { color: var(--cor-tinta-fraca); }
.tg-legenda--atencao-forte { color: #9A5B00; }
.ponto-linha--erro { background: var(--cor-erro); }

.cartao-linha--borda { border-bottom: 1px solid var(--cor-linha-fraca); }
.cartao-linha--atencao { background: var(--cor-atencao-fundo); }
.cartao-linha--erro { background: var(--cor-erro-linha-fundo); }
.cartao-linha--topo { align-items: flex-start; }
.cartao-linha__subtitulo--atencao { color: #7A4900; font-weight: 600; }
.cartao-linha__subtitulo--erro { color: var(--cor-erro-texto); font-weight: 600; }

/* ---------- tela 3 — aprovação ---------- */
.miolo-720 { width: 720px; max-width: 100%; }
.miolo-760 { width: 760px; max-width: 100%; }
.cartao--recorte { overflow: hidden; }
.resumo-aprovacao { padding: 24px 28px; display: flex; gap: 40px; align-items: flex-end; border-bottom: 1px solid var(--cor-linha-fraca); flex-wrap: wrap; }
.resumo-aprovacao__item { padding-bottom: 6px; }
.rotulo-com-espaco { margin-bottom: 6px; }
.valor-34 { font-size: 34px; letter-spacing: -1px; }
.valor-32 { font-size: 32px; letter-spacing: -0.8px; }
.valor-22 { font-size: 22px; }
.checklist-aprovacao { padding: 20px 28px; background: var(--cor-superficie-alt); }
.gate__titulo { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.gate__texto { margin: 0 0 18px 0; font-size: 13px; color: var(--cor-tinta-fraca); line-height: 1.5; }
.gate__linha { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.gate__nota { font-size: 13px; color: var(--cor-tinta-fraca); max-width: 260px; line-height: 1.45; }
.gate__titulo--celular { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.gate__texto--celular { margin: 0 0 14px 0; font-size: 12px; color: var(--cor-tinta-fraca); line-height: 1.45; }
.exibicao-codigo--espaco { margin-bottom: 14px; }
.campo__rotulo--pequeno { font-size: 13px; }
.miolo-celular { flex-grow: 1; padding: 20px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.resumo-celular { display: flex; gap: 22px; margin-top: 16px; }
.resumo-celular__rotulo { font-size: 12px; color: var(--cor-tinta-fraca); margin-bottom: 3px; }
.resumo-celular__valor { font-size: 17px; font-weight: 500; }
.resumo-celular__texto { font-size: 15px; font-weight: 600; }
.alerta__titulo--compacto { margin-bottom: 3px; }
.formulario-coluna { display: flex; flex-direction: column; gap: 16px; }
.formulario-coluna--20 { gap: 20px; }

/* botão de bloco no celular como <button> (o protótipo usa <a>) */
button.botao-principal--bloco { border: none; cursor: pointer; font-family: inherit; font-weight: 600; }

/* ---------- botões desativados (erro bloqueante) ---------- */
.botao-principal[disabled],
.botao-principal--bloco[disabled] { opacity: 0.45; cursor: not-allowed; }
button.botao-principal, button.botao-secundario { font-family: inherit; }

/* ---------- tela 4 — envio e confirmações digitadas ---------- */
.campo-palavra { width: 260px; max-width: 100%; letter-spacing: 4px; text-transform: uppercase; }
.progresso__barra { display: block; width: 100%; height: 10px; }
.linha-envio__detalhe { font-size: 12px; color: var(--cor-erro-texto); }

/* ---------- estados (pílula) — família verde/âmbar/vermelha, nunca laranja ---------- */
.pilula-estado--erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }

/* ---------- alerta de sucesso (conferências todas ok) ---------- */
.alerta--sucesso { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); }
.alerta--sucesso .alerta__titulo { color: var(--cor-sucesso-texto-forte); }
.alerta--sucesso .alerta__corpo { color: var(--cor-sucesso); }
/* alerta informativo neutro — o laranja fica só para o que decide algo (DESIGN.md §2) */
.alerta--neutro { background: var(--cor-superficie); border-color: var(--cor-linha); }
.alerta--neutro .alerta__titulo { color: var(--cor-tinta); }
.alerta--neutro .alerta__corpo { color: var(--cor-tinta-secundaria); }
.alerta__lista { margin: 6px 0 0 0; padding-left: 18px; }

/* ---------- rodapé do acompanhamento ---------- */
.rodape-acompanhamento { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nota-pequena { font-size: 12px; color: var(--cor-tinta-fraca); }
.nota-pequena--celular { font-size: 11px; color: var(--cor-tinta-fraca); line-height: 1.4; }
.formulario-inline { display: inline-flex; margin: 0; }
.miolo-celular--16 { flex-grow: 1; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.contexto-celular { font-size: 13px; color: var(--cor-tinta-fraca); }
.titulo-celular-data { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; margin-top: 2px; }
.stat-celular { padding: 14px; }
.stat-celular .celula-stat__valor { font-size: 22px; }
.cartao-lista { display: flex; flex-direction: column; overflow: hidden; }

/* ---------- P-12(a) — coluna "Nº" (sequencial) ao lado de "Linha da planilha" -----------
   `estilo.css` não é alterado (é o protótipo aprovado traduzido — ver o comentário no topo
   deste arquivo); as duas linhas abaixo REDEFINEM `.tg-validacao`/`.tg-acompanhamento` com uma
   coluna estreita a mais para o "Nº", porque este arquivo carrega DEPOIS de `estilo.css` no
   `<head>` (mesma especificidade, a ordem de carga decide) — ver `documento_html`. */
.tg-validacao { grid-template-columns: 34px 84px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.6fr) 120px; }
.tg-acompanhamento { grid-template-columns: 34px 84px minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 1.7fr) 110px 120px; }

/* ---------- P-10b — linhas com erro ou não enviadas (tentar de novo / retirar) ---------- */
.tg-pendentes { grid-template-columns: 34px 84px 120px minmax(0, 1.3fr) minmax(0, 1.8fr); }
.secao-pendentes { display: flex; flex-direction: column; gap: 16px; }
.formularios-pendentes { display: flex; gap: 20px; flex-wrap: wrap; }
.formularios-pendentes > form { flex: 1 1 320px; min-width: 280px; }
@media (max-width: 700px) {
  .formularios-pendentes { flex-direction: column; flex-wrap: nowrap; }
  .formularios-pendentes > form { min-width: 0; }
}

/* ---------- lista de lotes ---------- */
/* B7: coluna "CRIADO POR" a mais (7ª) — LOTE · PAGAMENTO EM · SITUAÇÃO · CRIADO POR · LINHAS ·
   TOTAL VÁLIDO · VALIDADO EM. */
.tg-lotes {
  grid-template-columns:
    minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) 70px 120px minmax(0, 0.9fr);
}
@media (max-width: 700px) {
  .tg-lotes { grid-template-columns: 1fr 1fr; }
}
.link-cabecalho { color: var(--cor-barra-texto-medio); font-size: 13px; }
.link-cabecalho:hover { color: #FFFFFF; }

/* ---------- Fase B (B6a) — telas de autenticação ---------- */
.miolo-460 { width: 460px; max-width: 100%; }
.campo-empilhado { display: flex; flex-direction: column; gap: 8px; }
.campo-largo { width: 100%; box-sizing: border-box; }
.campo-codigo { font-size: 22px; letter-spacing: 8px; text-align: center; }
.uri-otpauth {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cor-tinta-secundaria);
  background: var(--cor-superficie-alt);
  border: 1px solid var(--cor-linha-fraca);
  border-radius: 10px;
  padding: 10px 12px;
  word-break: break-all;
}
.comando-terminal { font-size: 12px; letter-spacing: 0; text-align: left; line-height: 1.6; }

/* ---------- B7 — cabeçalho com o usuário logado ---------- */
.cabecalho__usuario {
  font-size: 13px;
  color: var(--cor-barra-texto-medio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
@media (max-width: 700px) {
  .cabecalho__usuario { font-size: 12px; max-width: 180px; }
}

/* ---------- B7 — tela de usuários: perfil próprio (própria grade, não a de lotes) ---------- */
.tg-usuarios { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 110px 100px minmax(0, 1.7fr); }
/* Várias ações por linha (desativar/desbloquear/mudar perfil/resetar 2FA): empilhadas, não
   espremidas numa linha só. */
.acoes-usuario { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.acoes-usuario .formulario-inline { flex-wrap: wrap; gap: 6px; }
.campo-estreito { width: 140px; max-width: 100%; }
@media (max-width: 700px) {
  /* UMA coluna, não duas: a célula de AÇÕES tem select+botão lado a lado (mudar perfil,
     resetar 2FA) — na grade de duas colunas do `.tg-lotes` esse conteúdo fica espremido a
     ponto de o texto do botão quebrar letra a letra. Cada campo do usuário vira sua própria
     linha, de largura cheia. */
  .tg-usuarios { grid-template-columns: 1fr; }
  .campo-estreito { width: 100%; }
}

/* ---------- B7 — auditoria ---------- */
.tg-auditoria {
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.3fr) 110px minmax(0, 2fr);
}
@media (max-width: 700px) {
  .tg-auditoria { grid-template-columns: 1fr 1fr; }
}

/* ---------- B7 — /saude/detalhe (própria grade, não a de lotes/usuários) ---------- */
.tg-saude { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 100px; }
@media (max-width: 700px) {
  .tg-saude { grid-template-columns: 1fr 1fr; }
}

/* ---------- B8 — /descarte (retenção dos 5 anos) ---------- */
.tg-descarte {
  grid-template-columns: 110px 100px 100px minmax(0, 1.4fr) 80px 110px 110px;
}
@media (max-width: 700px) {
  .tg-descarte { grid-template-columns: 1fr 1fr; }
}