:root {
  --primary-blue: #2a6f97;
  --secondary-teal: #4fb0c6;
  --sun-yellow: #ffd700;
  --cloud-white: #f0f8ff;
  --gray-text: #555555;
  --event_title-text-align: center;
  --event_title-font-size: 2rem;
  --event_title-color: #000000;
  --event_title-font-weight: bold;
  --event_title-background-color: transparent;
  --logo-width: 100%;
  --logo-height: auto;
  --name-color: #000000;
  --name-font-weight: bold;
  --name-border-bottom: transparent;
  --name-font-size: 1.5rem;
  --name-text-align: center;
  --card-background-color: var(--cloud-white);
  --card-display: grid;
  --card-margin-bottom: 0;
  --card-gap: 20px;
  --card-height: auto;
  --card-padding: 20px;
  --value3-color: #333;
  --value3-font-family: "Segoe UI", Arial, sans-serif;
  --value3-font-size: 1.2rem;
  --value3-text-align: justify-left;
  --value3-font-weight: normal;
  --label3-color: var(--primary-blue);
  --label3-font-family: "Segoe UI", Arial, sans-serif;
  --label3-font-size: 1.2rem;
  --label3-text-align: justify-left;
  --label3-font-weight: bold;
  --value4-color: #333;
  --value4-font-family: "Segoe UI", Arial, sans-serif;
  --value4-font-size: 1.2rem;
  --value4-text-align: justify-left;
  --value4-font-weight: normal;
  --label4-color: var(--primary-blue);
  --label4-font-family: "Segoe UI", Arial, sans-serif;
  --label4-font-size: 1.2rem;
  --label4-text-align: justify-left;
  --label4-font-weight: bold;
  --value5-color: #333;
  --value5-font-family: "Segoe UI", Arial, sans-serif;
  --value5-font-size: 1.2rem;
  --value5-text-align: justify-left;
  --value5-font-weight: normal;
  --label5-color: var(--primary-blue);
  --label5-font-family: "Segoe UI", Arial, sans-serif;
  --label5-font-size: 1.2rem;
  --label5-text-align: justify-left;
  --label5-font-weight: bold;
  --value6-color: #333;
  --value6-font-family: "Segoe UI", Arial, sans-serif;
  --value6-font-size: 1.2rem;
  --value6-text-align: justify-left;
  --value6-font-weight: normal;
  --label6-color: var(--primary-blue);
  --label6-font-family: "Segoe UI", Arial, sans-serif;
  --label6-font-size: 1.2rem;
  --label6-text-align: justify-left;
  --label6-font-weight: bold;
  --value7-color: #333;
  --value7-font-family: "Segoe UI", Arial, sans-serif;
  --value7-font-size: 1.2rem;
  --value7-text-align: justify-left;
  --value7-font-weight: normal;
  --label7-color: var(--primary-blue);
  --label7-font-family: "Segoe UI", Arial, sans-serif;
  --label7-font-size: 1.2rem;
  --label7-text-align: justify-left;
  --label7-font-weight: bold;
  --value8-color: #333;
  --value8-font-family: "Segoe UI", Arial, sans-serif;
  --value8-font-size: 1.2rem;
  --value8-text-align: justify-left;
  --value8-font-weight: normal;
  --label8-color: var(--primary-blue);
  --label8-font-family: "Segoe UI", Arial, sans-serif;
  --label8-font-size: 1.2rem;
  --label8-text-align: justify-left;
  --label8-font-weight: bold;
  --value9-color: #333;
  --value9-font-family: "Segoe UI", Arial, sans-serif;
  --value9-font-size: 1.2rem;
  --value9-text-align: justify-left;
  --value9-font-weight: normal;
  --label9-color: var(--primary-blue);
  --label9-font-family: "Segoe UI", Arial, sans-serif;
  --label9-font-size: 1.2rem;
  --label9-text-align: justify-left;
  --label9-font-weight: bold;
  --value10-color: #333;
  --value10-font-family: "Segoe UI", Arial, sans-serif;
  --value10-font-size: 1.2rem;
  --value10-text-align: justify-left;
  --value10-font-weight: normal;
  --label10-color: var(--primary-blue);
  --label10-font-family: "Segoe UI", Arial, sans-serif;
  --label10-font-size: 1.2rem;
  --label10-text-align: justify-left;
  --label10-font-weight: bold;
  --footer-justify-content: center;
  --footer-background-color: transparent;
  --footer-max-height: 100px;
  --body-background-color: var(--cloud-white);
  --body-background-image: none;
  --certificate-margin: auto;
  --certificate-max-width: 800px;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}


body {
background-color: var(--body-background-color);
font-family: "Segoe UI", Arial, sans-serif;
background-repeat: no-repeat;
background-position: var(--fundo-background-position);
width: 100%;
min-height: 100vh;
}


#certificado {
width: 100%;
min-height: 100vh;
position: relative;
padding: 20px;
box-sizing: border-box;
}

#fundo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

.certificate {
width: 100%;
max-width: var(--certificate-max-width);
margin: var(--certificate-margin);
}

header {
text-align: center;
background: var(--event_title-background-color);
}
header img {
width: var(--logo-width);
height: var(--logo-height);
}

header .event_title {
text-align: var(--event_title-text-align);
font-size: var(--event_title-font-size);
color: var(--event_title-color);
font-weight: var(--event_title-font-weight);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.content {
padding: 10px 15px;
}

.name {
text-align: var(--name-text-align);
font-size: var(--name-font-size);
font-weight: var(--name-font-weight);
margin-bottom: 30px;
border-bottom: 2px solid var(--name-border-bottom);
padding-bottom: 10px;
color: var(--name-color);
word-break: break-word;
}

.grid {
display: var(--card-display);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--card-gap);
}

.card {
background-color: var(--card-background-color);
padding: var(--card-padding);
border-radius: 8px;
margin-bottom: var(--card-margin-bottom);
height: var(--card-height);
}

#labelCampo3 {
  font-weight: var(--label3-font-weight, var(--label3-font-weight));
  font-size: var(--label3-font-size, var(--label3-font-size));
  color: var(--label3-color, var(--label3-color));
  font-family: var(--label3-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo3 {
  font-size: var(--value3-font-size, var(--value3-font-size));
  color: var(--value3-color, var(--value3-color));
  font-family: var(--value3-font-family, var(--value3-font-family));
  font-weight: var(--value3-font-weight, var(--value3-font-weight));
  text-align: var(--value3-text-align, var(--value3-text-align));
}
#labelCampo4 {
  font-weight: var(--label4-font-weight, var(--label3-font-weight));
  font-size: var(--label4-font-size, var(--label3-font-size));
  color: var(--label4-color, var(--label3-color));
  font-family: var(--label4-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo4 {
  font-size: var(--value4-font-size, var(--value3-font-size));
  color: var(--value4-color, var(--value3-color));
  font-family: var(--value4-font-family, var(--value3-font-family));
  font-weight: var(--value4-font-weight, var(--value3-font-weight));
  text-align: var(--value4-text-align, var(--value3-text-align));
}
#labelCampo5 {
  font-weight: var(--label5-font-weight, var(--label3-font-weight));
  font-size: var(--label5-font-size, var(--label3-font-size));
  color: var(--label5-color, var(--label3-color));
  font-family: var(--label5-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo5 {
  font-size: var(--value5-font-size, var(--value3-font-size));
  color: var(--value5-color, var(--value3-color));
  font-family: var(--value5-font-family, var(--value3-font-family));
  font-weight: var(--value5-font-weight, var(--value3-font-weight));
  text-align: var(--value5-text-align, var(--value3-text-align));
}
#labelCampo6 {
  font-weight: var(--label6-font-weight, var(--label3-font-weight));
  font-size: var(--label6-font-size, var(--label3-font-size));
  color: var(--label6-color, var(--label3-color));
  font-family: var(--label6-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo6 {
  font-size: var(--value6-font-size, var(--value3-font-size));
  color: var(--value6-color, var(--value3-color));
  font-family: var(--value6-font-family, var(--value3-font-family));
  font-weight: var(--value6-font-weight, var(--value3-font-weight));
  text-align: var(--value6-text-align, var(--value3-text-align));
}
#labelCampo7 {
  font-weight: var(--label7-font-weight, var(--label3-font-weight));
  font-size: var(--label7-font-size, var(--label3-font-size));
  color: var(--label7-color, var(--label3-color));
  font-family: var(--label7-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo7 {
  font-size: var(--value7-font-size, var(--value3-font-size));
  color: var(--value7-color, var(--value3-color));
  font-family: var(--value7-font-family, var(--value3-font-family));
  font-weight: var(--value7-font-weight, var(--value3-font-weight));
  text-align: var(--value7-text-align, var(--value3-text-align));
}
#labelCampo8 {
  font-weight: var(--label8-font-weight, var(--label3-font-weight));
  font-size: var(--label8-font-size, var(--label3-font-size));
  color: var(--label8-color, var(--label3-color));
  font-family: var(--label8-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo8 {
  font-size: var(--value8-font-size, var(--value3-font-size));
  color: var(--value8-color, var(--value3-color));
  font-family: var(--value8-font-family, var(--value3-font-family));
  font-weight: var(--value8-font-weight, var(--value3-font-weight));
  text-align: var(--value8-text-align, var(--value3-text-align));
}
#labelCampo9 {
  font-weight: var(--label9-font-weight, var(--label3-font-weight));
  font-size: var(--label9-font-size, var(--label3-font-size));
  color: var(--label9-color, var(--label3-color));
  font-family: var(--label9-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo9 {
  font-size: var(--value9-font-size, var(--value3-font-size));
  color: var(--value9-color, var(--value3-color));
  font-family: var(--value9-font-family, var(--value3-font-family));
  font-weight: var(--value9-font-weight, var(--value3-font-weight));
  text-align: var(--value9-text-align, var(--value3-text-align));
}
#labelCampo10 {
  font-weight: var(--label10-font-weight, var(--label3-font-weight));
  font-size: var(--label10-font-size, var(--label3-font-size));
  color: var(--label10-color, var(--label3-color));
  font-family: var(--label10-font-family, var(--label3-font-family));
  margin-bottom: 5px;
  display: flex;
  align-items: center;
 fill: var(--sun-yellow);
}
#valueCampo10 {
  font-size: var(--value10-font-size, var(--value3-font-size));
  color: var(--value10-color, var(--value3-color));
  font-family: var(--value10-font-family, var(--value3-font-family));
  font-weight: var(--value10-font-weight, var(--value3-font-weight));
  text-align: var(--value10-text-align, var(--value3-text-align));
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: var(--footer-justify-content);
align-items: center;
padding: 20px;
gap: 20px;
background-color: var(--footer-background-color);
}

footer img {
max-width: 100%;
max-height: var(--footer-max-height);
height: auto;
object-fit: contain;
}

.separator {
width: 100%;
max-width: 1px;
height: 40px;
background: var(--gray-text);
}

.pdf-button {
padding: 10px 20px;
margin-top: 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
display: block;
width: fit-content;
margin-left: auto;
margin-right: auto;
}

/* Responsividade */
@media (max-width: 600px) {
.name {
font-size: 1.2rem;
}

.grid {
grid-template-columns: 1fr;
}

.card {
padding: 15px;
}

.content {
padding: 10px;
}
}


body.pdf-generating {
    font-size: 16px !important; /* Define um tamanho de fonte base consistente para 'rem' */
    line-height: 1.5 !important; /* Garante espaçamento de linha padrão para o corpo */
    /* Garante que o corpo não seja afetado por auto-ajustes de viewport mobile */
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

body.pdf-generating #certificado {
    /* Garante que o certificado ocupe o espaço necessário sem encolher verticalmente */
    min-height: auto !important;
    height: auto !important;
    padding: 20px !important; /* Mantém o padding padrão do desktop */
    box-sizing: border-box !important;
}

body.pdf-generating #fundo {
    height: 100% !important;
}

body.pdf-generating .name {
  font-size: var(--name-font-size) !important; /* Usa o tamanho original do desktop (1.5rem) */
  line-height: 1.3 !important; /* Garante espaçamento de linha para o nome */
  margin-bottom: 30px !important; /* Mantém a margem inferior padrão */
  padding-bottom: 10px !important; /* Mantém o padding inferior padrão */
}

body.pdf-generating .grid {
  display: var(--card-display) !important; /* Garante que 'grid' seja mantido */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; /* Força o layout de desktop */
  gap: 20px !important; /* Mantém o espaçamento entre cards */
}

body.pdf-generating .card {
  background-color: var(--card-background-color) !important;
  padding: 20px !important; /* Usa o padding original do desktop */
  border-radius: 8px !important;
}

body.pdf-generating .content {
  padding: 10px 15px !important; /* Força o padding original do desktop para o conteúdo */
}

/* Regras específicas para labels e values dentro dos cards */
body.pdf-generating #labelCampo3 {
  font-weight: var(--label3-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label3-font-size, var(--label3-font-size)) !important;
  color: var(--label3-color, var(--label3-color)) !important;
  font-family: var(--label3-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo3 {
  font-size: var(--value3-font-size, var(--value3-font-size)) !important;
  color: var(--value3-color, var(--value3-color)) !important;
  font-family: var(--value3-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value3-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value3-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #labelCampo4 {
  font-weight: var(--label4-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label4-font-size, var(--label3-font-size)) !important;
  color: var(--label4-color, var(--label3-color)) !important;
  font-family: var(--label4-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo4 {
  font-size: var(--value4-font-size, var(--value3-font-size)) !important;
  color: var(--value4-color, var(--value3-color)) !important;
  font-family: var(--value4-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value4-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value4-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #labelCampo5 {
  font-weight: var(--label5-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label5-font-size, var(--label3-font-size)) !important;
  color: var(--label5-color, var(--label3-color)) !important;
  font-family: var(--label5-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo5 {
  font-size: var(--value5-font-size, var(--value3-font-size)) !important;
  color: var(--value5-color, var(--value3-color)) !important;
  font-family: var(--value5-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value5-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value5-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #labelCampo6 {
  font-weight: var(--label6-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label6-font-size, var(--label3-font-size)) !important;
  color: var(--label6-color, var(--label3-color)) !important;
  font-family: var(--label6-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo6 {
  font-size: var(--value6-font-size, var(--value3-font-size)) !important;
  color: var(--value6-color, var(--value3-color)) !important;
  font-family: var(--value6-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value6-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value6-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #labelCampo7 {
  font-weight: var(--label7-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label7-font-size, var(--label3-font-size)) !important;
  color: var(--label7-color, var(--label3-color)) !important;
  font-family: var(--label7-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo7 {
  font-size: var(--value7-font-size, var(--value3-font-size)) !important;
  color: var(--value7-color, var(--value3-color)) !important;
  font-family: var(--value7-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value7-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value7-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #labelCampo8 {
  font-weight: var(--label8-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label8-font-size, var(--label3-font-size)) !important;
  color: var(--label8-color, var(--label3-color)) !important;
  font-family: var(--label8-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo8 {
  font-size: var(--value8-font-size, var(--value3-font-size)) !important;
  color: var(--value8-color, var(--value3-color)) !important;
  font-family: var(--value8-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value8-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value8-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #labelCampo9 {
  font-weight: var(--label9-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label9-font-size, var(--label3-font-size)) !important;
  color: var(--label9-color, var(--label3-color)) !important;
  font-family: var(--label9-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo9 {
  font-size: var(--value9-font-size, var(--value3-font-size)) !important;
  color: var(--value9-color, var(--value3-color)) !important;
  font-family: var(--value9-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value9-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value9-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #labelCampo10 {
  font-weight: var(--label10-font-weight, var(--label3-font-weight)) !important;
  font-size: var(--label10-font-size, var(--label3-font-size)) !important;
  color: var(--label10-color, var(--label3-color)) !important;
  font-family: var(--label10-font-family, var(--label3-font-family)) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  fill: var(--sun-yellow) !important;
  line-height: 1.3 !important;
}
body.pdf-generating #valueCampo10 {
  font-size: var(--value10-font-size, var(--value3-font-size)) !important;
  color: var(--value10-color, var(--value3-color)) !important;
  font-family: var(--value10-font-family, var(--value3-font-family)) !important;
  font-weight: var(--value10-font-weight, var(--value3-font-weight)) !important;
  text-align: var(--value10-text-align, var(--value3-text-align)) !important;
  line-height: 1.3 !important;
}

/* Opcional: Se houver outros elementos que mudam no mobile e você quer que fiquem como desktop para o PDF */
body.pdf-generating header .event_title {
  font-size: var(--event_title-font-size) !important;
  line-height: 1.2 !important; /* Garante espaçamento de linha para o título do evento */
}

/* Certifique-se de que imagens no cabeçalho e rodapé também mantenham suas proporções */
body.pdf-generating header img {
    width: var(--logo-width) !important;
    height: var(--logo-height) !important;
    object-fit: contain !important;
}

body.pdf-generating footer img {
    max-width: 100% !important;
    max-height: var(--footer-max-height) !important;
    height: auto !important;
    object-fit: contain !important;
}