.card-right-home{
    background:#fff;
    border-radius:15px;
    padding:70px 45px 35px;

    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:24px;

    box-shadow:
      0 4px 4px rgba(0,0,0,.15),
      0 10px 24px rgba(0,0,0,.08);
      
    position:relative;
				top:-12px;
}

.btn-card-login{
    width:270px;
    min-height:54px;
    padding:15px 20px;

    border-radius:8px !important;

    font-size:17px !important;
    font-weight:700 !important;
}

.btn-card-login i{
   font-size:18px;
}


/* caixa azul da nova versão */
.acesso-seguro-box{
    display:flex;
    align-items:center;   /* era flex-start */
    gap:14px;

    background:#ebf2fc;
    padding:16px 14px;
    border-radius:8px;

    max-width:270px;
    text-align:left;
}

.acesso-seguro-icone{
    width:52px;
    height:52px;

    border-radius:50%;
    background:#f0f6fd;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 4px 8px rgba(0,0,0,.12);

    flex-shrink:0;
}

.acesso-seguro-icone i{
    font-size:20px;
    color:#0C77BE; /* azul */
}

.acesso-seguro-texto{
    display:block; 
}

.acesso-seguro-texto .titulo{
    font-family: Inter, Arial, sans-serif;
    font-size:11px;
    font-weight:600;

    line-height:1;
    margin:0;     

    color:#000 !important;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.acesso-seguro-texto .descricao{
    font-family:Inter, Arial, sans-serif;
    font-size:10px;

    line-height:1.2;
    margin-top:-1px;     /* aproxima do título */

    color:#64748b;
}

.logo-celepar-card{
    height:30px;
    margin-top:18px;
    align-self:center;
}

.logo-home-topo{
    position:relative;
    margin-top:-4px;
    margin-bottom:26px;
    padding-bottom:18px;

    border-bottom:none;
}

.logo-home-topo:after{
    content:"";
    display:block;

    width:55px;          /* comprimento do traço */
    height:2px;

    margin-top:14px;

    background:#1d5f45; 
    border-radius:2px;
}

.logo-home-principal{
    height:62px;   /* próximo do mockup */
    width:auto;
    display:block;
}

.texto-apresentacao-home{
   max-width:430px;
   width:100%;
   margin-top:18px;
}

.texto-principal{
   font-size:15px;
   line-height:1.75;
   font-weight:500;

   color:#1f2937;   /* mais forte */

   text-align:justify;
   text-justify:inter-word;

   margin-bottom:20px;
}

.texto-secundario{
   font-size:13px;   /* um pouco menor */
   line-height:1.8;
   font-weight:400;

   color:#475569;   /* mais suave */

   text-align:justify;
   text-justify:inter-word;

   margin:0;
}

.texto-apresentacao-home strong{
   font-weight:700;
   color:#0f7a3f; /* verde */
}

.compromisso-box{
    margin-top:30px;
    max-width:420px;

    background:#fff;
    border-radius:14px;

    padding:18px 24px;

    display:flex;
    align-items:center;
    gap:16px;

    box-shadow:
      0 6px 18px rgba(15,23,42,.06),
      0 2px 6px rgba(15,23,42,.05);
}

.compromisso-icone{
    width:48px;
    height:48px;

    border-radius:50%;
    background:#eef7f1;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.compromisso-icone i{
    font-size:20px;
    color:#147F45;
}

.compromisso-divisor{
    width:2px;
    align-self:stretch;

    background:#285943;
    opacity:.18;
    border-radius:2px;
}

.compromisso-conteudo{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.compromisso-conteudo .titulo{
    font-size:11px;
    font-weight:700;
    color:#1f2937;
    
    margin:0 0 1px 0;   /* em vez de margin-bottom */
 			line-height:1.1;

    margin-bottom:3px;
}

.compromisso-conteudo .descricao{
	margin:0;
 			line-height:1.28;
    font-size:11px;
    line-height:1.35;
    color:#64748b;
}

.link-documento{
    font-size:10px;
    font-weight:600;
    color:#147F45;              /* verde SESA */
    text-decoration:none;
    line-height:1.45;
}

.link-documento i{
    color:#147F45;
}

.link-documento:hover{
    color:#0f5e34;              /* verde mais escuro no hover */
    text-decoration:underline;
}

.rodape-home {
    margin-top: 34px;
    padding-top: 16px;
    max-width: 420px;
    width: 100%;
    border-top: 1px solid #1D5C3A; /* verde escuro do mockup */
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;

    display: flex;
    align-items: center;
}

.rodape-esquerda,
.rodape-direita {
    flex: 1; /* cada lado ocupa metade */
    display: flex;
    align-items: center;
}

.rodape-esquerda {
    justify-content: flex-start; /* alinha à esquerda */
    gap: 4px;
}

.rodape-direita {
    justify-content: flex-end;   /* alinha à direita */
    border-left: 1px solid #1D5C3A; /* traço vertical no centro */
    padding-left: 8px;
}

.ambiente-tag{
    color:#64748b;
    font-weight:600;
}


/***************** Fonte variável normal */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* intervalo de pesos suportados */
  font-style: normal;
}

/* Fonte variável itálica */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

body {
    position: relative;
    z-index: 0;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* camada de fundo correta */
html::before {
    content: "";
    position: fixed;
    inset: 0; 
    background-image: url('../images/fundo-home.png'); 
    background-repeat: no-repeat; 
    
    /* Força o encaixe total na largura e na altura */
    background-size: 100% 100%; 
    
    /* Garante que comece do topo e não sofra deslocamentos */
    background-position: top left; 
    
    background-attachment: fixed;
    z-index: -1; 
}

form {
  width: 100%;
}

h1 {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  margin: 5px 0px 2px 0px; 
  padding-left: 5px;
  /* Borda cinza médio SESA */
  border-bottom: 1px solid #BBBBBB;
  /* Cor verde médio-escuro SESA */
  color: #147F45;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	/* Verde bem escuro SESA */
	color: #093B20;
}

.container-fluid{
   width:100%;
   padding-left:clamp(16px, 3vw, 42px);
   padding-right:clamp(16px, 3vw, 42px);
   box-sizing: border-box;
}
		
.centralizado-vertical {
  width: 100%;
  min-height: 100vh;        /* ocupa a tela toda */
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  padding: 20px 0;          /* reduz interferência */
}

.painel{
    width:90%;
    max-width:clamp(960px, 90vw, 1200px);
    margin: 0 auto;

    padding:56px 72px 42px;

    background:#fff;
    border:1px solid #e3e7eb;
    border-radius:10px;

    box-shadow:
       0 8px 28px rgba(15,23,42,.05),
       0 2px 6px rgba(15,23,42,.04);
}

.painel.identificacao {
  padding: 20px 20px; 
}

.painel-card {
  background-color: #ECECEC;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #BBBBBB;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
  width: 100%;
  color: #000000;
}

.campo-obrigatorio {
  font-family: Montserrat, Verdana, Arial, sans-serif;
  font-size: 11px; /* Ajustado conforme .obs_obrigatorio */
  /* Verde SESA para textos informativos/labels */
  color: #147F45;
  margin-top: 10px;
  padding-top: 5px;
  padding-left: 5px;
  text-align: left;
  border-bottom: 1px solid #BBBBBB;
}

.versao-sistema {
  font-size: 12px;
  color: #777;
}

.imagem-conjunto {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.imagem-responsiva {
  height: 50px;
  width: auto;
  max-width: 48%;
  object-fit: contain;
}

@media (max-width: 600px) {
  .imagem-responsiva {
    max-width: 60%;
    height: auto;
  }
  
  .painel{
        padding: 24px 20px;
    }
}

.fundo-formulario {
  /* Fundo cinza SESA dentro de áreas de formulário */
  background-color: #ECECEC;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #BBBBBB;
}

/* Botões customizados */
.btn-elegante {
  /* Azul SESA */
  background-color: #0C77BE; 
  color: white;
  border: 1px solid #0C77BE;
  font-family: Montserrat, Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
}

.btn-elegante:hover {
  /* Verde Escuro SESA ao passar o mouse */
  background-color: #093B20;
  border-color: #093B20;
  color: white;
}

/* Overrides do Bootstrap para combinar com o tema */
.bg-primary {
	/* Substitui o azul padrão do Bootstrap pelo Azul SESA */
	background-color: #0C77BE !important;
}

.bg-warning {
	/* Substitui o amarelo padrão pelo fundo de aviso SESA */
	background-color: #F6D8CE !important;
	border-bottom: 1px solid #BBBBBB;
}

/* Título dentro do modal de aviso (vermelho escuro) */
.modal-header.bg-warning .modal-title {
	color: #B40404 !important;
	font-weight: bold;
}

.btn-fechar-branco {
  border: 1px solid #FFFFFF;   /* borda branca */
  color: #FFFFFF;              /* texto branco */
  background-color: transparent; /* fundo transparente para destacar a borda */
}

.btn-fechar-branco:hover {
  background-color: #FFFFFF;   /* fundo branco ao passar o mouse */
  color: #0C77BE;              /* texto azul SESA para contraste */
}

/* Inputs e Selects */
input.form-control, select.form-select, textarea.form-control {
	border: 1px solid #BBBBBB;
	font-family: Montserrat, Verdana, Arial, sans-serif;
	font-size: 12px;
}

input.form-control:focus, select.form-select:focus {
	border-color: #147F45; /* Foco verde */
	box-shadow: 0 0 0 0.25rem rgba(20, 127, 69, 0.25);
}

.form-scroll {
  height: calc(100vh - 120px); /* reduz altura reservada p/ rodapé e título */
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 0;
}

.titulo-form {
  padding: 12px 20px;
  margin-top: 16px;      /* desloca o título para baixo */
  margin-bottom: 0;      /* elimina espaço extra abaixo do título */
}

.titulo-form h1 {
  padding-top: 4px;      /* leve respiro interno */
  margin-bottom: 0;      /* remove espaçamento padrão do h1 */
}

.rodape-form {
  padding: 4px 20px;
  border-top: 1px solid #1D5C3A;
  margin-bottom: 16px;   /* cria espaço abaixo do rodapé */
}


.bloco-documentos {
  max-width:420px;
  margin-top: 10px;
}

.nota-documentos {
  font-size: 11px;      /* menor que o texto principal */
  color: #777;          /* cinza claro, discreto */
  margin-bottom: 6px;   /* pouco espaço antes dos links */
  text-align: justify;  /* texto justificado */
  
}