/**
 * ClimateScanner PDF Styles
 * 
 * Estilos para otimizar a aparência dos PDFs gerados e feedback visual
 */

/* ========================================
   ESTILOS DE FEEDBACK VISUAL
   ======================================== */

/**
 * Overlay full-screen durante geração do PDF
 * z-index alto para ficar acima de tudo
 */
.cs-pdf-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(4px);
}

/**
 * Container do conteúdo do overlay
 */
.cs-pdf-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    text-align: center;
}

/**
 * Spinner de loading
 * Usa animação CSS simples que não trava durante a geração
 */
.cs-pdf-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--climate-scanner-roxo, rgb(65, 66, 147));
    border-radius: 50%;
    animation: cs-pdf-spin 1s linear infinite;
    /* Força aceleração por hardware para não travar */
    will-change: transform;
    transform: translateZ(0);
}

@keyframes cs-pdf-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/**
 * Texto do overlay
 */
.cs-pdf-overlay__title {
    font-size: 20px;
    font-weight: 600;
    color: #1E1E1E;
    margin: 0;
}

.cs-pdf-overlay__message {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/**
 * Animação de entrada do overlay
 */
.cs-pdf-overlay {
    animation: cs-pdf-fade-in 0.2s ease-out;
}

@keyframes cs-pdf-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/**
 * Estado de loading do botão
 */
.relatorio-pilares__download-btn.loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.relatorio-pilares__download-btn.loading svg {
    animation: cs-pdf-pulse 1.5s ease-in-out infinite;
}

@keyframes cs-pdf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA PDF
   ======================================== */

/**
 * Estilos aplicados ao elemento durante a geração do PDF
 * 
 * IMPORTANTE: O PDF A4 tem aproximadamente 793px de largura útil (com margens de 10mm).
 * Para evitar "espremimento", ajustamos o layout para caber nessa largura.
 */
.cs-pdf-generating {
    background: white !important;
    
    /* Define largura ideal para PDF A4 portrait */
    width: 750px !important;
    max-width: 750px !important;
    min-width: 750px !important;
    
    /* Remove margens e paddings externos */
    margin: 0 !important;
    padding: 32px 32px 100px 20px !important;
    
    /* Ajusta tamanho de fonte base */
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.cs-pdf-generating .animar {
    opacity: 1 !important;
    transition: none !important;
}
.cs-pdf-generating * {
    transition: none !important;
}

/**
 * Garante que textos sejam renderizados corretamente
 */
.cs-pdf-generating * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

/**
 * Otimiza imagens para o PDF
 */
.cs-pdf-generating img {
    max-width: 100%;
    height: auto;
    display: block;
    page-break-inside: avoid;
}

/**
 * Otimiza SVGs para o PDF
 */
.cs-pdf-generating svg {
    max-width: 100%;
    height: auto;
}

/**
 * Evita quebras de página em elementos importantes
 */
/* .cs-pdf-generating .cards-pilares__card,
.cs-pdf-generating .indicator-item,
.cs-pdf-generating .no-break {
    page-break-inside: avoid;
    break-inside: avoid;
} */

/**
 * Controle de quebras de página
 */
.page-break-before {
    page-break-before: always;
    break-before: always;
}

.page-break-after {
    page-break-after: always;
    break-after: always;
}

/**
 * Garante que sliders mostrem todos os slides no PDF
 */
.cs-pdf-generating .swiper-wrapper {
    height: auto !important;
    transform: none !important;
    flex-wrap: wrap !important;
}

.cs-pdf-generating .swiper-slide {
    display: block !important;
    margin-bottom: 20px;
    opacity: 1 !important;
    visibility: visible !important;
}

.cs-pdf-generating .swiper-pagination,
.cs-pdf-generating .swiper-button-next,
.cs-pdf-generating .swiper-button-prev {
    display: none !important;
}

/**
 * Oculta elementos que não devem aparecer no PDF
 */
.cs-pdf-generating .no-pdf,
.cs-pdf-generating .relatorio-pilares__download-btn {
    display: none !important;
}

/**
 * Garante espaçamento adequado entre seções
 */
.cs-pdf-generating > * + * {
    margin-top: 20px;
}

/**
 * Otimiza títulos para o PDF
 */
.cs-pdf-generating h1,
.cs-pdf-generating h2,
.cs-pdf-generating h3,
.cs-pdf-generating h4 {
    page-break-after: avoid;
    break-after: avoid;
}

/**
 * Garante que gráficos e visualizações sejam renderizados
 */
.cs-pdf-generating canvas {
    max-width: 100%;
    height: auto;
}

/* ========================================
   OTIMIZAÇÕES ESPECÍFICAS PARA COMPONENTES
   ======================================== */

/**
 * Ajustes para títulos no PDF
 */
.cs-pdf-generating h1 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
}

.cs-pdf-generating h2 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
}

.cs-pdf-generating h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

/**
 * Ajustes para grids e layouts flexbox
 */
.cs-pdf-generating .container,
.cs-pdf-generating [class*="__container"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/**
 * Ajustes para grids de cards
 */
.cs-pdf-generating [class*="__card"],
.cs-pdf-generating [class*="-card"] {
    page-break-inside: avoid;
}
.cs-pdf-generating .cards-pilares__card-number {
    font-size: 24px !important;
    margin-top: -7px !important;
}
.cs-pdf-generating .cards-pilares__card-title {
    margin-top: 0 !important;
}
.cs-pdf-generating .cards-pilares__card-title h3 {
    font-size: 9px !important;
}
.cs-pdf-generating .cards-pilares__card-icon svg {
    height: 33px !important;
    width: auto !important;
}

/**
 * Ajustes para imagens e ícones
 */
.cs-pdf-generating img,
.cs-pdf-generating svg {
    height: auto !important;
}

/**
 * Reduz espaçamentos excessivos
 */
.cs-pdf-generating [class*="__header"] {
    margin-bottom: 20px !important;
}

.cs-pdf-generating [class*="__section"] {
    margin-bottom: 20px !important;
}

/**
 * Ajustes para tabelas
 */
.cs-pdf-generating table {
    font-size: 11px !important;
}

.cs-pdf-generating th,
.cs-pdf-generating td {
    padding: 6px 8px !important;
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

/**
 * Classe para forçar quebra de página
 */
.pdf-page-break {
    page-break-before: always;
    break-before: always;
}

/**
 * Classe para evitar quebra de página
 */
.pdf-no-break {
    page-break-inside: avoid;
    break-inside: avoid;
}

/**
 * Classe para ocultar elementos apenas no PDF
 */
.pdf-hide {
    /* Será removido via JavaScript */
}


.relatorio-pilares.cs-pdf-generating {
    position: relative !important;
    padding-bottom: 40px !important;
}

.cs-pdf-generating .relatorio-pilares__description p {
    font-size: 10px !important;
    line-height: 1.4 !important;
}
.cs-pdf-generating .relatorio-pilares__intermediate-title {
    margin: 15px 0 0 0 !important;
}

.cs-pdf-generating .relatorio-pilares__intermediate-title h2 {
    font-size: 16px !important;
}

.cs-pdf-generating .cards-pilares {
    display: none !important;
}

.cs-pdf-generating .relatorio-pilares__header-name-for-pdf {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.cs-pdf-generating .relatorio-pilares__url-for-pdf-footer {
    display: block !important;
}

.cs-pdf-generating .bloco-indicadores__ruler-text {
    font-size: 10px !important;
}

.cs-pdf-generating .cards-pilares__card {
    /* width: calc( 20% - 12px ) !important; */
    /* max-width: calc( 20% - 12px ) !important; */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    page-break-inside: avoid;
    margin-bottom: 12px !important;
}
@media (max-width: 1023px) {
    .cs-pdf-generating .cards-pilares__card {
        width: calc( 20% - 12px ) !important;
        max-width: calc( 20% - 12px ) !important;
    }    
}
.cs-pdf-generating .cards-pilares__card:nth-child(5n) {
    margin-right: 0 !important;
}
.cs-pdf-generating .indicator-item {
    font-size: 10px !important;
    padding: 8px !important;
    page-break-inside: avoid;
}
.cs-pdf-generating .relatorio-pilares__button-container {
    display: none !important;
}

.cs-pdf-generating .indicators-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
}
.cs-pdf-generating .bloco-indicadores {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}
.cs-pdf-generating .bloco-indicadores__comparison-position {
    transform: scale(0.8) !important;
    margin-top: -8px !important;
}
.cs-pdf-generating .bloco-indicadores__comparison-arrow {
    font-size: 8px !important;
    margin-bottom: 2px !important;
}
.cs-pdf-generating .bloco-indicadores__container {
    gap: 10px !important;
}
.cs-pdf-generating .bloco-indicadores__main-number {
    font-size: 24px !important;
}
.cs-pdf-generating .bloco-indicadores__main-header h2 {
    font-size: 11px !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
}
.cs-pdf-generating .bloco-indicadores__main-block {
    padding-left: 10px !important;
    width: calc( 100% - 300px ) !important;
}
.cs-pdf-generating .bloco-indicadores__main-header {
    gap: 4px !important;
    height: auto !important;
}
.cs-pdf-generating .bloco-indicadores__main-description {
    padding: 8px 12px !important;
}
.cs-pdf-generating .bloco-indicadores__main-description p {
    font-size: 10px !important;
}
.cs-pdf-generating .bloco-indicadores__block {
    gap: 16px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler {
    width: 242px !important;
    height: 47px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler.bloco-indicadores__ruler--exception {
    height: 17px !important;
    border-radius: 4px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler-segment {
    height: 9px !important;
    top: 18px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler-segment.bloco-indicadores__ruler-segment--exception {
    top: 0 !important;
    display: flex !important;
    justify-content: center !important;
}
.cs-pdf-generating .bloco-indicadores__ruler-segment.bloco-indicadores__ruler-segment--exception .bloco-indicadores__ruler-text {
    font-size: 9px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler-segment--1 {
    width: 60px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler-segment--2 {
    width: 60px !important;
    left: 62px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler-segment--3 {
    width: 60px !important;
    left: 124px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler-segment--4 {
    width: 60px !important;
    left: 186px !important;
}
.cs-pdf-generating .bloco-indicadores__circle {
    width: 44px !important;
    height: 44px !important;
}
.cs-pdf-generating .bloco-indicadores__circle-text {
    font-size: 9px !important;
}
.cs-pdf-generating .bloco-indicadores__indicators {
    width: 200px !important;
}

.cs-pdf-generating .bloco-indicadores__main-block svg {
    width: auto !important;
    height: 40px !important;
}
.cs-pdf-generating .bloco-indicadores__main-icon {
    bottom: 14px !important;
    left: 8px !important;
}
.cs-pdf-generating .bloco-indicadores__item {
    gap: 0 !important;
}
.cs-pdf-generating .bloco-indicadores__item-title {
    font-size: 10px !important;
    margin-bottom: 0 !important;
}
.cs-pdf-generating .bloco-indicadores__ruler--exception .bloco-indicadores__ruler-text {
    font-size: 9px !important;
}
.cs-pdf-generating .bloco-indicadores__ruler--exception .bloco-indicadores__ruler-segment {
    top: -2px !important;
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
}

.cs-pdf-generating .relatorio-pilares__url-for-pdf-footer {
    display: block !important;
}