/* estils de la pàgina generadorDocs.html */ 

body{

	#contenidor {
        display: flex;
        align-items: flex-start;
        #menuEsquerra{
            width: 15%;
            flex-shrink: 0;
            border-right: 1px solid #ddd;
			transition: margin-top 0.3s ease;
			margin-top: 0;
			padding: 20px;
			width: 15%;
			height: 100%;
            overflow-y: auto;
			box-sizing: border-box;
			/* background-color: #f8f8f8; */
            input[type="reset"] {
                margin-top: 10px;
                padding: 6px 12px;
                border: 1px solid #ccc;
                border-radius: 4px;
                font-size: 14px;
                cursor: pointer;
                transition: all 0.3s ease;
                background-color: transparent;
                & :hover {
                    background-color: #f0f0f0;
                    border-color: #999;
                }
            }
            #pregunta-tests {
                padding: 10px;
                margin-top: 15px;
                border: 1px solid #7e7b7b;
                border-radius: 8px;
                background-color: #f7efef;
                label {
                    margin-bottom: 10px;
                    padding: 5px;
                    font-weight: bold;
                }
            
                input[type="number"],
                input.numeric,
                select{
                    width: 100%;
                    font-size: 0.95rem;
                    background-color: white;
                    border: 1px solid #ccc;
                    background-repeat: no-repeat;
                    background-position: right 10px center;
                    background-size: 16px;
                    appearance: none;
                    -webkit-appearance: none;
                    transition: border 0.2s ease, box-shadow 0.2s ease;
                    border-radius: 10px;
                    &:hover,
                    &:focus {
                        border-color: #b40e0e;
                        box-shadow: 0 0 0 2px rgba(191, 0, 0, 0.1);
                        outline: none;
                    }
                    &::placeholder {
                        color: #999;
                    }
                    option {
                        padding: 8px;
                    }
                }
            }
            
            input[type="number"],
            input.numeric {
                width: 100%;
                margin-bottom: 15px;
                padding: 8px;
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
                border: 1px solid #7e7b7b;
                border-radius: 4px;
                cursor: pointer;
                background-color: #ffffff;
            }

            input[type="number"]::-webkit-outer-spin-button,
            input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: auto;
                margin: 0;
            }

 

            input[list].select-sin-movimiento {
                width: 100%;
                /* font-size: 0.95rem; */
                background-color: #ffffff;
                border: 1px solid #ccc;
                background-repeat: no-repeat;
                background-position: right 10px center;
                background-size: 16px;
                appearance: none;
                -webkit-appearance: none;
                transition: border 0.2s ease, box-shadow 0.2s ease;
                border-radius: 10px;
                padding: 10px;
                &:hover,
                :focus {
                border-color: #b40e0e;
                    box-shadow: 0 0 0 2px rgba(191, 0, 0, 0.1);
                    outline: none;
                }
            
            }

			button {
				position: relative;
				padding: 5px;
				border: none;
				transition: transform 0.3s ease-in-out;
				background: none;
				cursor: pointer;

				&:hover {
					transform: scale(1.1);

					&::after {
						transform: scaleX(0.9);
					}
				}

				&::after {
					position: absolute;
					left: 0;
					bottom: -3px;
					width: 100%;
					height: 2px;
					content: '';
					transform: scaleX(0);
					transition: transform 0.3s ease-in-out;
					background-color: currentColor;
				}
			}
   
			nav{
				/* contenidor */
				border-radius: 5px;
				margin-bottom: 15px;
				margin-top: 30px;
				border-top: 6px solid #c00;
				box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2);

				/* contenidor - contingut */
				padding: 10px;

				/* contingut */
				font-weight: bold;

				a{
					/* contingut */
					color: black;
					text-decoration: none;
					transition: color 0.3s;
				}
				p{
					margin: 0 0 10px;
					font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;
					color: #333;
					font-size: 20px;

				}
				label{
					display: block;
					margin-bottom: 5px;
					font-weight: bold;
				}
				select{
					width: 100%;
					margin-bottom: 20px;
					padding: 10px;
					border: 1px solid #ccc;
					border-radius: 10px;
					cursor: pointer;
                    background-color: white;
					&:hover,
					&:focus {
						border-color: #b40e0e;
						outline: none;
						box-shadow: 0 0 0 2px rgba(191, 0, 0, 0.1);
					}
				}
				.icon {
					width: 24px;
					height: 24px;
					cursor: pointer;
					transition: transform 0.2s;

					&:hover {
						transform: scale(1.2);
					}
				}
                .label-boto {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    cursor: pointer;
                    margin-bottom: 5px;
                    //font-weight: bold;
                    transition: transform 0.2s ease;
                
                     :hover {
                    transform: scale(1.05);
                    }
                    .icon {
                    transition: transform 0.2s ease;
                    }
                }

                .label-boto:hover .icon {
                    transform: scale(1.2);
                }


.tooltip-exportar {
  visibility: hidden;
  opacity: 0;
  width: 220px;
  background-color: #444;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 2000;
  bottom: 120%;

  left: 0; /* <---- Cambiado de 50% a 0 */
  transform: none; /* <---- Puedes eliminar o dejar en none */
  transition: opacity 0.3s;
  font-size: 0.90em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.label-boto:hover .tooltip-exportar {
  visibility: visible;
  opacity: 1;
}

.tooltip-exportar::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px; /* <---- Mueve la flechita más cerca del botón */
  margin-left: 0; /* <---- Quita el desplazamiento central */
  border-width: 10px;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
}
				

			}
            .envoltori-autocompletar{
                margin-bottom: 20px;
                cursor: pointer;
            }

            .camp-autocompletar {
                position: relative;
            }


            .missatge-no-resultats {
                display: none;
                position: absolute;
                top: -20px; 
                right: 0;   
                color: #c00;
                font-size: 12px;
                /* pointer-events: none; */
                transition: opacity 0.2s ease;
                cursor: pointer;
            }
        }
		#botoMenuEsquerra {
		     font-size: 30px;
		}
		#mostrarMenuEsquerra {
			 background: none !important;
			 color: #000000;
			 box-shadow: none;
			 top: 35px;	
			 left: 20px;
			 font-size: 30px;			 
			 cursor: pointer;
			
		}
		
.tooltip-imprimir {
  visibility: hidden;
  opacity: 0;
  width: 220px;
  background-color: #444;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 2000;
  bottom: 120%;

  left: 0; /* <---- Cambiado de 50% a 0 */
  transform: none; /* <---- Puedes eliminar o dejar en none */
  transition: opacity 0.3s;
  font-size: 0.90em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.label-boto:hover .tooltip-imprimir {
  visibility: visible;
  opacity: 1;
}

.tooltip-imprimir::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px; /* <---- Mueve la flechita más cerca del botón */
  margin-left: 0; /* <---- Quita el desplazamiento central */
  border-width: 10px;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
}

        #a4-paper {
            margin-top: 30px;
            flex-grow: 1;
            padding-left: 20px;
            max-width: 210mm;
            /* margin: 10px auto !important;  */
            z-index: 1;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            > :first-child{
                display: flex;
                flex: 1;
                justify-content: space-between;  
                width: 100%;
                /* float: left; */
                gap: 20px; 
                margin-top: 40px;
                border-color: #333;
                border-style: dotted;
                border-width: 1px;
                text-align: center;
                align-items: center;
                .hidden {
                    visibility: hidden;
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out;
                } 
                .logo-fullA4 {
                    position: relative;
                    flex: 1;
                    text-align: center;
                    margin: 5px;
                    margin-top: 50px;
                    width: 100%;
                    max-width: 200px;
                    align-items: center; 
                    text-align: center;
                    justify-content: space-between; 
                    width: auto;
                    height: auto;
                    object-fit: contain;
                    .previsualitzacio-logo {
                        max-width: 120px;
                        max-height: 80px;
                        object-fit: contain;
                        display: block;
                        margin: 10px auto;
                    }

                   .remove-logo {
                        position: absolute;
                        top: 5px;
                        right: 5px;
                        background: red;
                        color: white;
                        border: none;
                        border-radius: 50%;
                        width: 22px;
                        height: 22px;
                        font-weight: bold;
                        cursor: pointer;
                        display: none;
                    }

                    .logo-fullA4 .previsualitzacio-logo:not(.hidden) + .remove-logo {
                        display: inline-block;
                    }
                    /* Botons per baixar logos - ACAE*/
                    input[type="file"]{
                        display: none;
                        /* Estilo para el botón del input */
                        + label {
                            display: inline-block;
                            border-radius: 5px;
                            padding: 5px 10px;
                            color: black;
                            cursor: pointer;
                            font-size: 14px;
                            background-color: #eaeaea;
                            margin-top: 5px;
                            /* Opcional: cambiar el estilo cuando se pasa el ratón */
                            :hover {
                                background-color: #d5d5d5;
                            }
                        }
                    }
                }
            }

            > :nth-child(2) {
                width: 100%;
                .a4-seccio {
                    page-break-after: always;
                    .questions-container {
                        margin: 20px 0 0 10px;
                        width: 95%;
                        li {
                            ::marker {
                                content: ""; 
                            }
                        }
                        .question {
                            margin-bottom: 20px;
                            label {
                                display: block;
                                margin-bottom: 5px;
                                font-weight: bold;
                            }
                    
                            .question-input {
                                width: 100%;
                                margin-bottom: 10px;
                                resize: none;
                                height: 50px;
                                padding: 10px;
                                border-radius: 4px;
                                border: 1px solid #ccc;
                            }
                            
                            .entrada-resposta {
								font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;
                                width: 100%;
                                min-height: 80px;
                                padding: 10px;
                                resize: vertical; 
                                border: 1px solid #ccc;
                                font-size: 14px;
                                margin-bottom: 10px;
                            }
                        }
                    } 
                    .textarea-document {
                        width: 100%;
                        box-sizing: border-box;
                        resize: none;
                        border: none;
                        outline: none;
                        padding: 10px;
                        font-family: inherit;
                        font-size: 14px;
                        color: #000;
                        background: transparent;
                    }


                }
            }
        }
        #a4-peu {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 10px 20px;
            gap: 10px;
            background-color: #ffffff;
            position: relative;
            flex-wrap: wrap;
        
            .logo-mitja {
                display: block;
                margin-bottom: 15px;
                align-self: center;
            }
        
            .logo {
                max-height: 50px;
                max-width: 150px;
                object-fit: contain;
                transition: all 0.3s ease-in-out; 
        
                &[src=""] {
                    display: none;
                }
            }
            #logo-esquerra {
                order: 1;
                margin-right: auto;
            }
        
            #logo-dreta {
                order: 3;
                margin-left: auto;
            }
        
            #logo-mitja {
                order: 2;
                margin: 0 auto;
            }
        
            .logo-group {
                &:has(.logo-esquerra:not([src=""])):has(.logo-dreta:not([src=""])) {
                    justify-content: space-between;
                }
            }
        
            &:has(.logo-mitja:not([src=""])) {
                &:has(.logo-esquerra:not([src=""])):has(.logo-dreta[src=""]),
                &:has(.logo-esquerra[src=""]):has(.logo-dreta:not([src=""])) {
                    align-items: center;
                }
            }
        
            &:has(.logo-esquerra:not([src=""])):has(.logo-mitja[src=""]):has(.logo-dreta[src=""]),
            &:has(.logo-esquerra[src=""]):has(.logo-mitja:not([src=""])):has(.logo-dreta[src=""]),
            &:has(.logo-esquerra[src=""]):has(.logo-mitja[src=""]):has(.logo-dreta:not([src=""])) {
                justify-content: center;
            }
        }

    }
        /* Estilos para el modal de confirmación */
        .modal-confirmacion {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
            
            .modal-contenido {
                position: relative;
                background: white;
                padding: 2.5rem 2rem 2rem;
                border-radius: 12px;
                width: 90%;
                max-width: 500px;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
                animation: slideIn 0.3s ease;
                
                .modal-cerrar-btn {
                    position: absolute;
                    top: 1rem;
                    right: 1rem;
                    background: none;
                    border: none;
                    font-size: 1.5rem;
                    cursor: pointer;
                    padding: 0.25rem;
                    border-radius: 50%;
                    width: 32px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background-color 0.2s ease;
                    
                    &:hover {
                        background-color: #f0f0f0;
                    }
                    
                    &:focus {
                        outline: 2px solid #0066cc;
                        outline-offset: 2px;
                    }
                }
                
                h3 {
                    margin-top: 0;
                    margin-bottom: 1rem;
                    color: #c00;
                    font-size: 1.5rem;
                    text-align: center;
                }
                
                p {
                    margin-bottom: 2rem;
                    line-height: 1.5;
                    color: #333;
                    text-align: center;
                    font-size: 1.1rem;
                }
                
                .modal-botones {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 0.75rem;
                    
                    @media (min-width: 480px) {
                        grid-template-columns: repeat(2, 1fr);
                        
                        .btn-principal {
                            grid-column: span 2;
                        }
                    }
                    
                    button {
                        padding: 0.875rem 1.5rem;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                        font-weight: 500;
                        transition: all 0.2s ease;
                        font-size: 1rem;
                        
                        &:focus {
                            outline: 2px solid #c00;
                            outline-offset: 2px;
                        }
                    }
                    
                    .btn-principal {
                        background-color: #c00;
                        color: white;
                        font-weight: 600;
                        
                        &:hover {
                            background-color: #c00;
                            transform: translateY(-1px);
                        }
                        
                        &:active {
                            transform: translateY(0);
                        }
                    }
                    
                    .btn-secundario {
                        background-color: #f8f9fa;
                        color: #333;
                        border: 1px solid #dee2e6;
                        
                        &:hover {
                            background-color: #e9ecef;
                            border-color: #ced4da;
                        }
                        
                        &:active {
                            background-color: #dee2e6;
                        }
                    }
                    
                    #btnSeguirEditando {
                        background-color: #28a745;
                        color: white;
                        border: none;
                        
                        &:hover {
                            background-color: #218838;
                        }
                    }
                }
            }
        }

        /* Animaciones */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { 
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
            to { 
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
/* Solo para embudo + mensaje de mòduls */
.ocultar-moduls {
  display: none !important;
}

/* Contenedor del input de mòduls amb icona de filtre */
.camp-autocompletar--moduls-filtrats {
  position: relative;
}

.camp-autocompletar--moduls-filtrats .input-usuari {
  padding-right: 2.5rem; /* espacio para el icono a la derecha */
}

.icona-filtre-moduls {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  z-index: 3;
}

.icona-filtre-moduls svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Missatges "sense mòduls" (comú a les dues pàgines) */
.missatge-sense-moduls {
  font-size: 0.85rem;
  margin-top: 4px;
  color: #b3261e;
}
.ocultar-moduls {
  display: none !important;
}


    }


/********************************/
/********** Responsive **********/
/********************************/

/* Estilos responsivos para pantallas pequeñas */

/*Maquetació per a telèfons mòvils*/
@media (max-width: 450px) {
	    body {
			width: 100dvw !important;
        & #contenidor {
            #menuEsquerra {
				width: 100%;
            }
        }
		#info-taula{
				width: 95dvw !important;
		}
		#info-taula tr td input {
			width: 100% !important	
		}
		#curs-info {
			width: 100% !important;
		}
		#a4-paper {
			width: 100% !important;	
		}
		#btnScrollTop {
			right: 3dvw !important;
			margin-bottom: 10dvh !important;
			border-radius: 40% !important;
		}
		#menu-hamburguesa {
			z-index: 200 !important;
		}
		#logos-XXSS {
			margin-left: 95px !important;	
		}
            }
        }
/*Responsive per a pantalles petites */
@media (max-width: 1300px) {
    
body{

	#contenidor {
        #menuEsquerra{
            width: 20vw;
            #pregunta-tests {
                margin: 0 auto;
                width: 80%;
            }
        }
    }

    /* Mostrar el botón hamburguesa */
    .menu-toggle {
        display: flex;
    }
        /* Animación del botón hamburguesa */
    .menu-toggle.active div:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .menu-toggle.active div:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active div:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    .opcions {      
        text-align: center;     
    }
    .top-menu {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: white;
        display: none;
        transition: all 0.3s ease-in-out;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #ddd;
    
        ul {
            flex-direction: column;
            width: 100%;
            padding: 0;
            text-align: center;
    
            li {
                width: 100%;
                padding: 10px 0;
    
                a {
                    display: block;
                    width: 100%;
                    padding: 15px 0;
                }
            }
        }
    
        &.active {
            display: flex;
        }
    }

}
}

	 @media (max-width: 768px) {
        body{

            #contenidor {
                #menuEsquerra{
                  
                        width: 100vw;
                    
                }
                #a4-paper {
                    width: 90%;
                    padding: 10px;
                }
            }
        }
    } 
    
	 @media (max-width: 820px) {
        body{

            #contenidor {
                display: flex;
                flex-direction: column;
                #menuEsquerra{
                        width: 100vw;
                }
            }
        }
    } 
	 @media (max-width: 912px) {
        body{

            #contenidor {
                display: flex;
                flex-direction: column;
                #menuEsquerra{
                        width: 100vw;
                }
            }
        }
    } 


    /*PARA EL MÉTODO DE IMPRIMIR*/
@media print {
    input[type="date"] {
        display: none; 
    }

    #print-date {
        display: inline; 
    }

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

    /* Hide everything except the A4 sheet */
    body * {
        visibility: hidden;
    }

    #a4-paper, #a4-paper * {
        visibility: visible;
    }

    /* Set body dimensions to A4 size */
    body {
        width: 100% !important; /* Exact width of an A4 sheet */
        height: 297mm; /* Exact height of an A4 sheet */
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
    }

    #a4-paper {
        page-break-after: always;
        width: 100% !important; 
        height: 297mm;
        padding: 20mm; 
        background: white;
        box-shadow: none;
        page-break-before: always; 
        page-break-after: always; 
    }

    /* .menu-formulari,
    .menu-bar,
    .top-bar {
    } */
     /* Ocultar secciones marcadas como ocult-print durante la impresión */
    .ocult-print {
        display: none !important;
    }

    .a4-peu {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: none;
        background: none;
    }

    .a4-peu .logo {
        max-height: 40px; 
    }

    .a4-page {
        box-shadow: none;
        margin: 0;
        width: 100%;
        height: auto;
        page-break-after: always;
    } 
}
/* Fallback de datalist para móviles/tablets */
.camp-autocompletar {
  position: relative;
}

.auto-menu {
  position: absolute;
  inset: auto 0  auto 0; 
  top: calc(100% + 4px);
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 10000;
  display: none;
}

.auto-menu.visible { display: block; }

.auto-menu li {
  list-style: none;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
  font-size: 0.95rem;
}

.auto-menu li:last-child { border-bottom: none; }
.auto-menu li:hover { background: #f7f7f7; }
.auto-menu li.buit { color: #999; cursor: default; }