body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

/* Contêiner Principal com Duas Metades */
.main-container {
    display: flex;
    height: 100vh;
}

/* Metade Esquerda: Formulário */
.left-panel {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f4f4f4;
}

/* Metade Direita: Prévia do PDF */
.right-panel {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #e6e6e6;
    display: flex;
    flex-direction: column; /* Alterado para column para incluir o footer */
    justify-content: flex-start; /* Alinha o conteúdo no topo */
    align-items: center; /* Centraliza horizontalmente */
}

/* Estilo da Interface de Entrada */
.form-container {
    width: 100%;
    background-color: #1C2526;
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
}

.form-container h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.section {
    margin-top: 1mm;
}

.readings, .values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.input-group {
    display: flex;
    flex-direction: column;
    height: 50px;
}

.input-group label {
    font-size: 12px;
    margin-bottom: 5px;
}

.input-group input {
    padding: 5px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}

.charts {
    display: flex;
    justify-content: space-between;
}

.chart-box {
    width: 100%;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    height: 100%;
    background-color: #1C2526;
}

.chart-box p {
    color: #333;
    font-size: 12px;
    margin-bottom: 10px;
    color: #fff;
    font-weight: bold;
}

.chart-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.chart-controls .input-group {
    flex: 1;
}

.chart-controls button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.chart-controls .add-value {
    background-color: #DC3545;
    color: white;
}

.chart-controls .delete-value {
    background-color: #6C757D;
    color: white;
}

.generate-pdf {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #F5A623;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

.generate-pdf:hover {
    background-color: #e69520;
}

/* Estilo do PDF (Prévia) */
.pdf-container {
    width: 210mm; /* A4 width */
    height: 297mm; /* A4 height */
    background-color: #E6E6E6;
    color: #333;
    padding: 15mm;
    box-sizing: border-box;
    position: relative;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra para destacar a prévia */
}

/* Ajuste dinâmico da escala para caber na tela */
.right-panel .pdf-container {
    transform-origin: top left;
    transform: scale(0.45); /* Ajustado para caber na tela */
}

.pdf-container .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10mm;
    gap: 1mm;
    height: 20mm;
}

.pdf-container .logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pdf-container .logo img {
    width: 30mm;
    margin-bottom: 1mm;
}

.pdf-container .logo .investor-name {
    font-size: 10pt;
    color: #333;
    font-weight: bold;
    margin: 0;
}

.pdf-container .title-contact {
    text-align: right;
}

.pdf-container .title-contact h1 {
    font-size: 18pt;
    font-weight: bold;
    margin-bottom: 2mm;
    color: #333;
}

.pdf-container .contact p {
    margin: 1mm 0;
    font-size: 10pt;
    color: #333;
}

.pdf-container .section.readings {
    margin-bottom: 5mm;
}

.pdf-container .readings-top {
    margin-bottom: 3mm;
}

.pdf-container .readings-top .input-group {
    background-color: #fff;
    padding: 2mm 2mm;
    border-radius: 2mm;
    border: 1px solid #000;
    text-align: center;
    width: 70mm;
    font-size: 8pt;
}

.pdf-container .readings-bottom {
    display: flex;
    justify-content: space-between;
    gap: 0.5mm;
}

.pdf-container .section.readings .input-group {
    background-color: #fff;
    padding: 2mm 2mm;
    border-radius: 2mm;
    border: 1px solid #000;
    text-align: center;
    flex: 1;
    height: 10mm;
    width: auto;
}

.pdf-container .section.readings .input-group.credit-highlight {
    background-color: #28A745;
}

.pdf-container .section.readings .input-group.credit-highlight label,
.pdf-container .section.readings .input-group.credit-highlight span {
    color: #fff;
}

.pdf-container .section.readings .input-group label {
    font-size: 8pt;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.pdf-container .section.readings .input-group span {
    font-size: 12pt;
    color: #333;
}

.pdf-container .section.values {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 colunas de largura igual */
    gap: 3mm; /* Espaço entre as caixas */
    margin-bottom: 5mm;
    width: 180mm; /* Espaço interno útil (210mm - 15mm de padding de cada lado) */
}

.pdf-container .value-box {
    background-color: #fff;
    padding: 2mm; /* Padding interno */
    border-radius: 2mm;
    border: 1px solid #000;
    text-align: center;
    min-height: 10mm; /* Altura mínima ajustada */
    width: 100%; /* Ocupa 100% da largura da célula da grade (25% do total) */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

.pdf-container .value-box p {
    margin: 0;
    font-size: 8pt; /* Tamanho da fonte ajustado */
    color: #333;
    text-transform: uppercase;
    line-height: 1.2; /* Ajuste para evitar quebras */
    white-space: nowrap; /* Evita quebras de linha */
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona reticências se o texto for muito longo */
}

.pdf-container .value-box p:last-child {
    font-size: 10pt; /* Tamanho da fonte para o valor */
    font-weight: bold;
    margin-top: 1mm;
}

.pdf-container .section.charts {
    margin-bottom: 5mm;
    height: 77mm; /* Altura fixa para evitar expansão */
}

.pdf-container .chart-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2mm;
    height: 77mm;
}

.pdf-container .recebimento-table {
    width: 50%;
    background-color: #fff;
    padding: 2mm; /* Reduzido de 3mm para economizar espaço */
    border: 1px solid #000;
    text-align: center;
    box-sizing: border-box;
    height: 77mm; /* Altura fixa mantida */
    overflow: hidden;
}

.pdf-container .recebimento-table p {
    color: #333;
    font-size: 7pt; /* Reduzido para economizar espaço */
    font-weight: bold;
    margin-bottom: 1mm;
    text-transform: uppercase;
}

.pdf-container .recebimento-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 6pt; /* Reduzido para caber 12 linhas */
}

.pdf-container .recebimento-table th, 
.pdf-container .recebimento-table td {
    border: 1px solid #000;
    padding: 0.5mm; /* Reduzido para economizar espaço */
    text-align: center;
    color: #333;
}

.pdf-container .recebimento-table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

.pdf-container .recebimento-table tbody {
    display: block;
    max-height: 65mm; /* Ajustado para caber 12 linhas dentro de 77mm */
    overflow-y: auto;
}

.pdf-container .recebimento-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.pdf-container .retorno-acumulado {
    margin-top: 2mm;
    font-size: 10pt;
    color: #333;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
}

.pdf-container .retorno-acumulado span {
    font-weight: bold;
    color: #28A745;
}

.pdf-container .chart-box {
    width: 65%;
    background-color: #fff;
    padding: 3mm;
    border: 1px solid #000;
    text-align: center;
    box-sizing: border-box;
    height: 100%;
}

.pdf-container .chart-box p {
    color: #333;
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 2mm;
    text-transform: uppercase;
}

.pdf-container .chart-box canvas {
    max-height: 40mm !important;
    width: 100% !important;
}

.pdf-container .section.differentials {
    margin-top: 10mm; /* Aumentado para posicionar a seção mais abaixo */
    margin-bottom: 5mm;
    width: 180mm; /* Espaço interno útil (210mm - 15mm de padding de cada lado) */
}

.pdf-container .section.differentials h2 {
    font-size: 10pt;
    text-align: center;
    margin-bottom: 1mm;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
}

.pdf-container .differentials-row {
    display: flex;
    justify-content: space-between;
    gap: 3mm;
    margin-bottom: 3mm;
    height: 30mm;
}

.pdf-container .differentials-row:first-child .differential-box {
    flex: 1;
}

.pdf-container .differentials-row:last-child {
    justify-content: flex-start;
}

.pdf-container .differentials-row:last-child .differential-box {
    flex: 1;
    max-width: calc(33.33% - 3mm);
}

.pdf-container .differential-box {
    background-color: #fff;
    padding: 3mm;
    border-radius: 2mm;
    border: 1px solid #000;
    text-align: center;
}

.pdf-container .differential-box p {
    color: #333;
    font-size: 9pt;
    margin: 1mm 0;
}

.pdf-container .differential-box p strong {
    font-weight: bold;
    font-size: 10pt;
    text-transform: uppercase;
}

.pdf-container .qr-code {
    right: 15mm;
    text-align: center;
}

.pdf-container .qr-code img {
    width: 25mm;
    height: 25mm;
}

.pdf-container .qr-code p {
    font-size: 10pt;
    margin-top: 1mm;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
}

/* Estilo do rodapé apenas na interface web */
.web-footer {
    width: 100%;
    text-align: center;
    margin-top: 10px; /* Espaço acima do rodapé */
}

.web-footer p {
    font-size: 12px; /* Tamanho ajustado para a interface web */
    color: #333;
    margin: 0;
    font-family: Arial, sans-serif;
}