/* Bulma Override */
.sec1, .sec2, .sec3, .sec4 { padding: 0!important; height: auto !important;   /* Altura automática para ajustarse al contenido */
            min-height: 0 !important;}

/* Botón cerrar */
.btClosePreview{ 
    text-decoration:none;
    display: inline-block;
    background-color: white;
    opacity: 0.8; 
    color:#343434; 
    top:15px; 
    right: 30px;
    position: fixed; 
    padding: 3px 5px;
    font-size: 13px;
    border-radius: 6px;
}
.btClosePreview:hover {opacity: 1;}

/* Back panel */
.previewContainer{overflow-y:scroll;display:none;position:fixed;top:0;left:0;width: 100%;height:100%;z-index:102;background-color:rgba(0,0,0,0.8)}

/* Pie de figura */
.pieDeFoto { display: inline-block; width: 95%; background-color: white; padding: 5px; bottom: 0px; right:0; left:0; font-size: 12px; line-height: 1em; color: black; font-family: Arial, sans-serif; }

/* Popup generador */
.divCaptureGenerator{
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    width: 250px;
    height: 250px;
    border: 1px solid #ccc;
    background-color: white;
    z-index: 9999;
    padding: 10px;
    border-radius: 3px;
    box-shadow:0px 0px 5px rgba(50, 50, 50, 0.75);
}
.divCaptureGenerator h3{margin-top: 0px;font-size: 16px; text-align: center;}
.divCaptureGenerator .divTotalCount{text-align: center;margin-top: 30px;}
.divCaptureGenerator .btResumeCaptureGenerator{display: none;}
.divCaptureGenerator .loading{background-image: url('../images/loading.gif'); width: 35px;height: 35px;margin: 10px auto;}
.divCaptureGenerator .divCaptureGeneratorButtons {margin-top:40px;text-align: center;}

/* Botón imprimir */
#print { text-decoration: none; border: none; display: inline-block; background-color: white;opacity: 0.7; color:#343434; top: 40px; right: 20px; position: absolute; padding: 5px; font-size: 16px; }
#print:hover { opacity: 1; }

#posterContainer { width: 100%; }

canvas, img { image-rendering: optimizeQuality; }

/* ********************************* POSTER PREVIEW ********************************* */

#posterPreviewContainer {
    height: 1920px;
    width: 1080px;
    max-width: 1080px;
    margin:0 auto;
    background-color: white;
    font-family: Arial, sans-serif;
}
#posterPreviewContainer p { margin-top: 0; padding-bottom: 1.2em; line-height: 1.1em; }

#posterPreviewContainer #headerImage { height: 60px; width: 100%; max-width: 100%; }
#posterPreviewContainer #header { background-color: #1c2e3a; text-align: center; color: white; padding: 1%; }
#posterPreviewContainer #header h1 {display: inline-block; padding:0px 5px; margin-bottom: 5px; font-size: 23px; }
#posterPreviewContainer #header p { display: inline-block; padding: 0; width: 96%; font-size: 14px; }

#posterPreviewContainer #footer {background-color: #1c2e3a; height:60px; width: 100%; max-width: 100%;}

/* Sections */
#sectionsContainer { width: 100%; }
#sectionsContainer .sectionPoster { display:inline-block;background-color:white;min-height: 10%;width: 100%; }
#sectionsContainer .sectionPoster .text {text-align: justify;padding: 0px 15px;margin-top: 10px; margin-bottom: 5px;}
#sectionsContainer .sectionPoster .text p {margin-bottom: 0px;font-size: 22px; white-space: pre-wrap; }
#sectionsContainer .sectionPoster .title {text-align:center;color:#FFFFFF;background-color:#1c2e3a;width:100%;padding:5px 0px;font-size: 20px; }

/* Imágenes sueltas */
#sectionsContainer .sectionPoster img.right {float: right;}
#sectionsContainer .sectionPoster img.rightAlto {float: right;margin-left: 10px;}
#sectionsContainer .sectionPoster img.group3 {display: inline-block;margin: 0px 5px;}
#sectionsContainer .sectionPoster p img.group3Alto {display: inline-block;margin: 0px 20px;}

/* Container de imágenes */
#sectionsContainer .sectionPoster p.imageContainer {
    text-align: center;
    white-space:inherit;
    margin: 10px 0;
}
#sectionsContainer .sectionPoster p.imageContainer > a {
    display: inline-block;
    position: relative;
    margin: 10px;
    max-width: 100%;
}

/* Todas las imágenes crecen libremente */
#sectionsContainer .sectionPoster p.imageContainer img,
#posterCaptureContainer .sectionPoster p.imageContainer img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ----------------------------------------------- */
/* ----------- SIN MAX-HEIGHT DESDE AQUÍ ---------- */
/* ----------------------------------------------- */

/* 1–8 imágenes: solo control del ancho, no de altura */
#sectionsContainer .sectionPoster p.imageContainer.oneImages  > a { max-width: 90%; }
#sectionsContainer .sectionPoster p.imageContainer.twoImages  > a { max-width: 45%; }
#sectionsContainer .sectionPoster p.imageContainer.threeImages> a { max-width: 30%; }
#sectionsContainer .sectionPoster p.imageContainer.fourImages > a { max-width: 45%; }
#sectionsContainer .sectionPoster p.imageContainer.fiveImages > a { max-width: 45%; }
#sectionsContainer .sectionPoster p.imageContainer.sixImages  > a { max-width: 45%; }
#sectionsContainer .sectionPoster p.imageContainer.sevenImages> a { max-width: 45%; }
#sectionsContainer .sectionPoster p.imageContainer.eightImages> a { max-width: 45%; }

/* ********************************* POSTER CAPTURE ********************************* */

#posterCaptureContainer {
    height: 3840px;
    width: 2160px;
    max-width: 2160px;
    margin:0 auto;
    background-color: white;
    font-family: Arial, sans-serif;
    position: relative;
}

#posterCaptureContainer #headerImage { height: 120px; width: 100%; max-width: 100%; }
#posterCaptureContainer #header { background-color: #1c2e3a; text-align: center; color: white; padding: 1%; }
#posterCaptureContainer #header h1 {font-size: 40px; line-height: 1em; }
#posterCaptureContainer #header p { font-size: 24px; line-height: 1em; }

#posterCaptureContainer #footer { background-color: #1c2e3a; height:120px; width: 100%; position: absolute; bottom: 0; }
#posterCaptureContainer #footer img {width: 100%;}

/* Texto */
#posterCaptureContainer #sectionsContainer .sectionPoster .text p {font-size: 40px; line-height: 1em;}
#posterCaptureContainer #sectionsContainer .sectionPoster .title {padding:10px 0px;font-size: 40px;}

/* Imágenes generales sin límites */
#posterCaptureContainer #sectionsContainer .sectionPoster img.right {margin-left: 10px;}
#posterCaptureContainer #sectionsContainer .sectionPoster img.group3 {margin: 0px 10px;}
#posterCaptureContainer #sectionsContainer .sectionPoster p img.group3Alto {margin: 0px 40px;}

#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer {
    padding-top: 20px;
    text-align: center;
}

#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer > a {
    max-width: 45%;
    margin: 20px;
}

#posterCaptureContainer .pieDeFoto{
    padding: 10px;
    font-size: 24px;
    line-height: 1em;
}

/* Ajuste proporcional 1–8 imágenes */
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.oneImages  > a { max-width: 90%; }
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.twoImages  > a { max-width: 45%; }
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.threeImages> a { max-width: 30%; }
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.fourImages > a { max-width: 45%; }
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.fiveImages > a { max-width: 45%; }
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.sixImages  > a { max-width: 45%; }
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.sevenImages> a { max-width: 45%; }
#posterCaptureContainer #sectionsContainer .sectionPoster p.imageContainer.eightImages> a { max-width: 45%; }