/* Componentes: card, botões, formulário (Padrao_Formulario, controles 40px), avisos. */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  box-shadow: var(--sombra);
}

.btn-primary, .btn-secundario, .btn-fantasma, .btn-perigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--controle-h);
  padding: 0 16px;
  border-radius: var(--raio-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn-primary { background: var(--cor-primaria); color: var(--texto-sobre-cor-primaria); }
.btn-primary:hover { background: var(--cor-primaria-hover); text-decoration: none; }
.btn-secundario { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.btn-secundario:hover { border-color: var(--cor-primaria); text-decoration: none; }
.btn-fantasma { background: transparent; color: var(--texto-suave); }
.btn-fantasma:hover { background: var(--fundo); color: var(--texto); text-decoration: none; }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-perigo:hover { filter: brightness(.92); text-decoration: none; }

/* Padrao_Modal: .modal-sm 34vw x 42vh (mínimos para tela pequena); ESC e fundo não fecham (static/js/modal.js). */
.modal-fundo { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); display: none; align-items: center;
  justify-content: center; z-index: 200; padding: 16px; }
.modal-fundo.aberto { display: flex; }
.modal { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px; }
.modal-sm { width: 34vw; min-width: min(360px, 100%); min-height: 22vh; max-height: 42vh; }
.modal-titulo { font-family: var(--font-titulo); font-size: 17px; margin: 0; }
.modal-texto { margin: 0; color: var(--texto); flex: 1; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-fantasma.btn-sm { padding: 0 8px; }
.btn-bloco { width: 100%; }
.icon { font-size: 16px; }

.ra-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 18px;
}
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto); }
.campo label.opcao { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.campo label.opcao input { width: auto; height: auto; min-height: 0; padding: 0; margin: 3px 0 0; flex: none; }
.campo label.opcao input[type="checkbox"], .campo label.opcao input[type="radio"] { width: 16px; height: 16px; accent-color: var(--cor-primaria); }
.campo input, .campo select, .campo textarea {
  height: var(--controle-h);
  box-sizing: border-box;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 0 12px;
  background: var(--superficie);
  color: var(--texto);
}
.campo textarea { height: auto; min-height: 90px; padding: 10px 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}

.aviso {
  border-radius: var(--raio-sm);
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid transparent;
}
.aviso-erro { background: var(--erro-suave); color: var(--erro); border-color: var(--erro-suave); }
.aviso-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.aviso-alerta { background: var(--alerta-suave); color: var(--alerta); }
.aviso-message, .aviso-info { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

/* Tela de login */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(160deg, var(--cor-primaria-suave), var(--fundo) 55%);
}

/* Rodapé da empresa (todas as telas e login): discreto, não compete com o conteúdo */
.rodape-empresa {
  margin-top: auto;
  padding: 12px 24px 16px;
  display: flex;                          /* logo e texto juntos, o bloco todo no centro */
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cor-primaria-texto);   /* rosa da marca: contraste ~4,8:1 sobre o fundo, passa no mínimo de leitura */
  border-top: 1px solid var(--cor-primaria-suave);
}
.rodape-empresa .sem-quebra { white-space: nowrap; }   /* no celular "CNPJ:" não se separa do número */
/* Linha fina rosa entre o logo e o texto */
.rodape-textos { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 1px solid var(--cor-primaria-suave); }
/* Logo real (rosa + cinza, como no menu), pequeno: da altura das duas linhas. No Resumo o rodapé do relatório segue apagado. */
.rodape-logo { line-height: 1; text-align: left; }
.rodape-logo .logo-nome { font-size: 20px; }
.rodape-logo .logo-sub { font-size: 11px; }
.tela-login .rodape-empresa { margin-top: 16px; padding: 0; border-top: 0; text-align: center; }   /* respiro do cartão */
.tela-login .rodape-logo { display: none; }   /* no login o logo já está no cartão */
.tela-login .rodape-textos { padding-left: 0; border-left: 0; }
@media (max-width: 760px) {
  .rodape-empresa { flex-direction: column; text-align: center; padding: 12px 16px 16px; }
  .rodape-textos { padding-left: 0; border-left: 0; }
}
@media print { .rodape-empresa { display: none; } }
.login-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 10px 30px var(--cor-primaria-sombra);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Login em tela cheia: painel da marca à esquerda (cor sólida, linhas emaranhadas que viram uma reta),
   formulário e rodapé à direita. Sem cartão flutuante: a tela inteira é ocupada. */
.tela-login:has(.login-split) { display: block; padding: 0; background: var(--superficie); }
.login-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
/* Logo e formulário juntos num bloco só, no meio da altura (na linha da reta do painel); branco igual em cima e embaixo;
   rodapé colado no pé. Logo longe do formulário parecia solto (testado e recusado em 04/10) */
.login-lado { display: grid; grid-template-rows: 1fr auto auto 1fr auto; justify-items: center; padding: 24px 24px 20px; }
.login-lado .login-marca { grid-row: 2; }
.login-lado .login-caixa { grid-row: 3; }
.login-lado .rodape-empresa { grid-row: 5; }
.login-lado .login-caixa { max-width: 400px; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.login-lado .rodape-empresa { margin-top: 0; }
/* Logo maior na tela cheia, para não ficar pequeno ao lado do título do painel */
.login-lado .login-marca { margin: 0 0 40px; }
.login-lado .login-marca .logo-nome { font-size: clamp(40px, 3.6vw, 56px); }
.login-lado .login-marca .logo-sub { font-size: clamp(14px, 1.1vw, 17px); }
/* Marca "pingo vivo" (aprovada 04/10): painel com bagunça de fundo, fios que formam o nome (login_vivo.js).
   Estado final = sem a classe .vivo (é o que vê quem desliga animação, tela estreita ou sem JS). */
.login-split {   /* painel escuro (04/10): o rosa cheio cansava a vista; preto + rosa como a FIAP e o cartão */
  --login-painel-fundo: var(--preto-marca);
  --login-painel-texto: var(--texto-sobre-cor-primaria);
  --login-fio-painel: var(--cor-primaria);   /* cor dos fios enquanto estão sobre o painel: já nascem rosa */
}
.login-painel { position: relative; min-height: 540px; background: var(--login-painel-fundo); color: var(--login-painel-texto); overflow: hidden; }
.login-fundo { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); fill: none;
  stroke: rgba(255, 255, 255, .10); stroke-width: 1.2; opacity: .4; animation: login-deriva 14s ease-in-out infinite alternate; }
.vivo .login-fundo { opacity: 1; }
@keyframes login-deriva { to { transform: translate(18px, -12px); } }
.login-fios { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; fill: none; stroke-linecap: round; }
.login-fios .no-rosa path { stroke: var(--login-fio-painel); }
.login-fios .no-branco path { stroke: var(--cor-primaria); }
.login-lado { position: relative; z-index: 2; }
.login-marca:has(.logo-vivo) { cursor: pointer; user-select: none; }
.logo-vivo .i { position: relative; display: inline-block; }
.logo-vivo .pingo { position: absolute; left: calc(50% + .035em); top: .05em; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: var(--cor-primaria); }
.logo-vivo .aceso .pingo { background: var(--preto-marca); }   /* o pingo aceso é preto (a decisão); cinza foi testado e recusado */
.vivo .logo-vivo .pingo { transform: scale(0); }
.vivo .logo-vivo .logo-nome { clip-path: inset(-40% 100% -40% 0); }
.vivo .logo-vivo .logo-sub { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .login-fundo { animation: none; } }
/* título e frase no meio da altura, alinhados à esquerda, crescendo com a tela; já estão lá ao abrir (os fios desviam) */
.login-painel-texto { position: absolute; left: clamp(40px, 6vw, 120px); right: clamp(40px, 6vw, 120px); top: 50%; transform: translateY(-50%); }
.login-painel-titulo { margin: 0; font-family: var(--font-titulo); font-size: clamp(40px, 3.8vw, 84px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; max-width: 11em; }
.login-painel-frase { margin: .9em 0 0; font-size: clamp(17px, 1.25vw, 26px); line-height: 1.5; opacity: .92; }
@media (max-width: 760px) {
  .login-split { grid-template-columns: 1fr; min-height: 0; }
  .login-painel { min-height: 290px; }
  .login-fios { display: none; }
  .login-painel-texto { left: 20px; right: 20px; top: auto; bottom: 20px; transform: none; }
  .login-painel-titulo { font-size: 24px; }
  .login-painel-frase { font-size: 14px; }
  .login-lado { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 28px 16px 16px; }
  .login-lado .login-marca { margin: 0; }
}
.login-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.login-marca .marca-icone {
  width: 40px; height: 40px; border-radius: var(--raio-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: var(--texto-sobre-cor-primaria); font-size: 20px;
}
.login-marca .marca-textos { display: flex; flex-direction: column; line-height: 1.2; }
.login-marca .marca-nome { font-family: var(--font-titulo); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.login-marca .marca-sub { font-size: 12px; color: var(--texto-fraco); }

/* Marca Simplifica Processos (sidebar e login) */
.logo-simplifica { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.logo-nome {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.05em;
  color: var(--cor-primaria);
}
.logo-sub { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--texto-fraco); margin-top: 1px; }
.login-marca .logo-nome { font-size: 30px; }
.login-marca { justify-content: center; text-align: center; }
.login-marca .marca-textos { align-items: center; }
.logo-cliente { height: 56px; width: auto; border-radius: var(--raio-sm); flex-shrink: 0; }
.marca-textos .marca-sub { margin-top: 8px; }
.form-login { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

/* Leia-me */
.leiame h2 { margin-top: 18px; }
.leiame h2:first-child { margin-top: 0; }
.leiame ol { margin: 0 0 10px; padding-left: 20px; }