/*****
	Selector universal
    Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
    Sintaxis: * ns|* *|*
    Ejemplo: * se aplicará a todos los elementos del documento.
*****/


	* {
		/* contenidor */
		box-sizing: border-box;
		margin: 0;
	}

	html, body {
		height: auto;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		scroll-padding-top: 120px;
	}
	[id] {
		scroll-margin-top: 120px;
	}


/*** Per DOM ***/


body {
	/* contenidor */
	display: flex;
	flex-direction: column;
	height: 100%;
	flex-grow: 1;
	background-color: #fff;

	/* contenidor - contingut */
	margin: 0;
	padding: 0;
	justify-content: center;

	/* contingut */
	font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;
	align-items: center;
	font-size: 1em;


	header{
		/* contenidor */
		position: sticky;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 3000;
		margin: 0;
		padding: 0;
		color: #fff;
		#menu-hamburguesa {
            display: none;
		}
		/* Primera franja: nav */
		> :first-child{

			/* contenidor */
			display: flex;
			gap: 15px;
			position: relative;
			top: 0;
			left: 0;
			height: 45px;
			margin-bottom: auto;

			/* contenidor - contingut */
			background-color: #222;
			padding: 10px 40px;
			justify-content: center;
			align-items: center;

			/* contingut */
			color: #fff;

			transition: all 0.3s ease-in-out;

			a{
				text-decoration: none;
				color: #fff;
				transition: color 0.3s;
			}


			/* Logo i enllaç Gencat */
			> :first-child{
				/* contenidor - contingut */
				margin-left: 15%;

				#logo_gencat{
					/* contenidor */
					width: auto;
					height: 25px;
				}
			}

			/* Zona reservada per a mostrar el nom del departament */
			> :nth-child(2) {
				/* contenidor */
				opacity: 0;

				/* contenidor - contingut */
				/* contingut */
			}

			/* Menús contacte, idioma i cerca */
			> :nth-child(3) {
				/* contenidor */
				display: flex;
				gap: 15px;

				/* contenidor - contingut */
				background: transparent;
				align-items: center;
				margin-left: auto;
				margin-right: 10%;

				/* contingut */
				font-size: 14px;
				text-decoration: none;
				cursor: pointer;

				a{
					color: #fff;
					text-decoration: none;
					font-size: 14px;
					font-weight: 550;
				}

				ul{
					display: none;
				}
		/* ===== Selector de idioma (CSS Nesting nativo) ===== */
		@supports selector(&) {
		#idiomes-contenidor {
			/* contenedor */
			display: flex;
			border: none;
			gap: 5px;
			position: relative;
			z-index: 3000;

			/* contenedor - contingut */
			padding: 5px 10px;
			align-items: center;

			/* contingut */
			color: white;
			text-decoration: none;
			cursor: pointer;
			font-size: 14px;
			background: transparent;

			/* Botón del desplegable */
			#idiomes-desplegable {
			display: flex;
			gap: 5px;
			align-items: center;
			padding: 5px 10px;
			border-radius: 3px;
			transition: background-color 0.3s;
			}

			/* Icono flecha */
			#idioma-icon {
			width: 12px;
			height: 12px;
			transition: transform 0.3s;
			filter: invert(1) brightness(100%);
			color: white;
			}

    /* Lista oculta por defecto */
    ul {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      background: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      list-style: none;
      padding: 0;
      margin: 0;
      min-width: 120px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      z-index: 1000;

      li {
        margin: 0;

        a {
          display: block;
          padding: 8px 12px;
          text-decoration: none;
          color: #333 !important;
          transition: background-color 0.3s;

          &:hover {
            background-color: #f5f5f5;
          }
        }
      }
    }

    /* Estado abierto: muestra la lista y rota el icono */
    &.active {
      ul { display: block; }
      #idioma-icon { transform: rotate(180deg); }
    }
  }
}

				/* Logo cerca */
				#logo_cerca{
					/* contenidor */
					width: 16px;
					height: 16px;

					/* contingut */
					font-weight: bold;
					filter: invert(1);
				}
			}
		}

		/* Segona franja */
		> :nth-child(2) {
			/* contenidor */
			display: flex;
			position: relative;
			top: 0px;
			z-index: 1000 !important;
			width: 100%;
			height: 46px;

			/* contenidor - contingut */
			padding: 10px 40px;
			padding-top: 20px;
			background-color: #444;
            text-align: center;

			/* contingut */
			color: #fff;
			background-color: #444;
			font-size: 16px;
			font-weight: normal;
            line-height: 20px;
			text-align: center;
			overflow: visible !important;

			a{
				margin-left: 14%;
				text-decoration: none;
				text-align: center;
				color: #fff;
				font-size: 18px;
				transition: color 0.3s;
			    }
		}

		/* Tercera franja */
		> :nth-child(3) {
			/* contenidor */
			display: flex;
			width: 100%;
			height: 65px;
			border-top: 2px solid #333;
			border-bottom: 1px solid #d0cbcb;

			/* contenidor - contingut */
			align-items: center;
			justify-content: center;
			text-align: center;
			background-color: white;

			/* contingut */

			span{
				color: #dddddd;
			}
			ul{
			/* contenidor */
			display: flex;
			gap: 15px;
			padding: 0;
			margin: 0;
			height: 100%;
			/* contenidor - contingut */
			justify-content: center;
			align-items: center;
			/* contingut */
			list-style: none;

				.paginaActual a {
					position: relative;
					border-bottom: 4px solid rgba(180, 14, 14, 0.6);
				}

				li{
				/* contenidor */
				display: flex;
				height: 100%;
				padding: 0 20px;
				position: relative;
				/* contenidor - contingut */
				align-items: center;

					a{
					/* contenidor */
					position: relative;
					display: flex;
					height: 100%;
					padding: 0 20px;

					/* contenidor - contingut */
					align-items: center;

					/* contingut */
					text-decoration: none;
					color: #3a3a3a;
					font-weight: 550;

						&:hover {
							border-bottom: 3px solid #c00;
							width: 100%;
						}

						:hover::after {
							opacity: 1;
						}

						&::after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 4px;
							background-color: #c00;
							opacity: 0;
						}
					}
				}
			}
		}
		
	}

	&.scrolled {
		header {
		  > :first-child {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9999;

			> :nth-child(2) {
			  display: flex;
			  opacity: 1;
			  align-items: center;

			  &::before {
				margin: 0 10px;
				content: "| ";
				color: #fff;
				font-weight: bold;
			  }
			}
		  }

		  > :nth-child(2),
		  > :nth-child(3) {
			display: none;
		  }
		}
		.ruta-navegacio-container {
			transform: translateY(-100%);
			opacity: 0;
			pointer-events: none;
		}
	  }

	/* Contenidor de columnes/barres */

	#contenidor {
		/* contenidor */
		display: flex;
		flex: 1;
		/* flex-direction: column; */
		position: relative;
		flex-wrap: nowrap;
		width: 100%;
	
		.ocult {
			display: none !important;
		}

		#mostrarMenuEsquerra {
			position: absolute;
			top: 200px;
			left: 15px;
			z-index: 999;
			display: none;
			background-color: #c00;
			color: white;
			border: none;
			/* padding: 10px 15px; */
			border-radius: 5px;
			cursor: pointer;
			font-size: 20px;
			box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		}

		/* Columna main */
		main {
			/* contenidor */
			/* max-width: 1200px; */
			display: flex;
			flex: 1 0 auto;
			overflow: visible;
			margin: 0 auto;
			background-color: white;
				

			/* contenidor - contingut */
			/* padding: 20px; */
			overflow: visible;

			/* contingut */
			line-height: 1.6;


			flex-direction: column;
			/* align-items: center; */
			justify-content: space-between;
			width: 100%;
			h2{
				text-align: center;
			}
			summary {
				cursor: pointer;
				font-weight: bold;
				list-style: none;
				outline: none;
				text-align: left;
			}

			table {
				width: 100%;
				margin-top: 15px;
			}
			/* Saltos de página */
			h3, table, .question {
				page-break-inside: avoid; /* Evita cortes en medio de tablas */
			}

			thead {
				border-bottom: 2px solid black;
			}

			thead .colored-cell {
				background-color: #f0f0f0;
			}

			td, th {
				padding: 10px;
				text-align: left;
				border: 1px solid black;
			}
		}
	}
	/* Estils de la página principal Index.html i tutorial.html */

	/* Contenedor de ancho completo para el breadcrumb */
	.ruta-navegacio-container {
		position: sticky;
		top: 156px; 
		z-index: 1000;
		background-color: rgba(245, 245, 245, 0.95);
		backdrop-filter: blur(4px);
		width: 100%;
		padding: 20px 0 10px 0;
		margin: 0;
		box-shadow: 0 2px 4px rgba(0,0,0,0.05);

		/* Contenedor interno centrado */
		.ruta-navegacio {
			max-width: 1200px;
			margin: 0 auto;
			padding: 10px 40px;
			font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;
			font-size: 14px;
			color: #333;
			h1 {
				font-size: 24px;
				color: #333;
				margin-top: 20px;
				margin-bottom: 10px;
			}

			.llista-migues {
				display: flex;
				list-style: none;
				margin: 0;
				padding: 0;
				align-items: center;
			}

			.item-migues {
				display: flex;
				align-items: center;

				.enllac-migues {
					text-decoration: none;
					transition: color 0.3s, transform 0.3s, font-weight 0.3s;
					font-weight: 500;
					color: black;
					border-bottom: 1px solid black;

					&:hover {
						transform: scale(1.1);
						font-weight: 700;
					}
				}
			}

			.separador-migues {
				color: #999;
				margin: 0 8px;
				font-weight: normal;
			}
		}
	}

	#paginaPrincipal-inici {
		display: table-column;
		max-width: 1200px;
		padding: 10px 40px;
		line-height: 1.8;  
		margin: 0 auto;
		margin-top: 10%;
		margin-bottom: 5%;
		color: #333;
		background-color: #fff;
		font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;

		/* Ajustes de márgenes y espaciado para los elementos */

		h2 {
			color: #333;
			font-size: 26px;
			margin-top: 40px;
			margin-bottom: 15px;
			font-weight: 600;
		}

		h3 {
			color: #444;
			font-size: 22px;
			margin-top: 30px;
			margin-bottom: 10px;
			font-weight: bold;
		}

		p {
			color: #666;
			margin-bottom: 20px;
			font-size: 16px;
			line-height: 1.6;
			text-align: justify;
		}

		ul {
			margin-bottom: 20px;
			padding-left: 20px;
			list-style-type: disc;
		}

		li {
			margin-bottom: 10px;
		}

		a {
			/* color: #c00;  */
			text-decoration: none;
			transition: color 0.3s ease;

			&:hover {
				color: #900;
			}
		}

		iframe {
			margin: 30px 0;
			width: 100%;
			max-width: 560px;
			height: 315px;
			border: 1px solid #ddd;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		}

		.seccio-contingut {
			margin: 30px 0;
			padding: 20px;
			background-color: #f8f8f8;
			border-left: 4px solid #c00;

			h2 {
				color: #333;
				font-size: 22px;
				margin-bottom: 15px;
			}

			p {
				margin-bottom: 15px;
				line-height: 1.6;
			}

			ul, ol {
				margin-bottom: 15px;
				padding-left: 20px;

				li {
					margin-bottom: 8px;
				}
			}

		}
		/* Mejorar la separación entre párrafos */
		p + p {
			margin-top: 25px;
		}

		details[open] summary img {
			transform: rotate(180deg);
		}

		details {
			margin-bottom: 20px;
			border-bottom: 1px solid #eee;
			padding-bottom: 15px;
		}

		/* Estilo para el globus de "Model del qualitat del CFCC" */
		.globus-model-qualitat {
			/* position: relative;
			overflow: hidden;  */
			right: 20px;
			top: 200px;
			width: 300px;
			display: flex;
			flex-direction: column;
			gap: 15px;
			margin-right: 250px;
			padding: 20px;
			z-index: 1000;
			background: #fff;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
	
		}

		/* Estilo para el enlace dentro del globo */
		.enllac-model-qualitat {
			display: inline-flex;
			padding: 10px;
			justify-content: center;
			gap: 8px;
			/* border-radius: 5px; */
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
			transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s; /* Agregado para la transición del crecimiento y sombra */
			font-size: 18px;
			font-weight: bold;
			color: #333;
			text-decoration: none;
			background-color: #f5f5f5;

			align-items: center;
			text-align: center;
			.icona-enllac {
				width: 12px;
				height: 12px;
				vertical-align: middle;
			}
		}

		/* Estilo al pasar el ratón sobre el enlace */
		.enllac-model-qualitat:hover {
			text-decoration: underline;
			transform: scale(1.08);
			box-shadow:
			0px 10px 24px rgba(0, 0, 0, 0.3),
			0px 3px 10px rgba(0, 0, 0, 0.15),
			0px -2px 6px rgba(0, 0, 0, 0.08);
			color: #333;
		}
	}
	
	#paginaPrincipal {
		display: table-column;
		max-width: 1200px;
		padding: 10px 40px;
		line-height: 1.8;  
		margin: 0 auto;
		/* margin-top: 10%; */
		/* margin-bottom: 5%; */
		color: #333;
		background-color: #fff;
		font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;

		/* Ajustes de márgenes y espaciado para los elementos */

		h2 {
			color: #333;
			font-size: 26px;
			margin-top: 40px;
			margin-bottom: 15px;
			font-weight: 600;
		}

		h3 {
			color: #444;
			font-size: 22px;
			margin-top: 30px;
			margin-bottom: 10px;
			font-weight: bold;
		}

		p {
			color: #666;
			margin-bottom: 20px;
			font-size: 16px;
			line-height: 1.6;
			text-align: justify;
		}

		ul {
			margin-bottom: 20px;
			padding-left: 20px;
			list-style-type: disc;
		}

		li {
			margin-bottom: 10px;
		}

		a {
			/* color: #c00;  */
			text-decoration: none;
			transition: color 0.3s ease;

			&:hover {
				color: #900;
			}
		}

		iframe {
			margin: 30px 0;
			width: 100%;
			max-width: 560px;
			height: 315px;
			border: 1px solid #ddd;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		}

		.seccio-contingut {
			margin: 30px 0;
			padding: 20px;
			background-color: #f8f8f8;
			border-left: 4px solid #c00;

			h2 {
				color: #333;
				font-size: 22px;
				margin-bottom: 15px;
			}

			p {
				margin-bottom: 15px;
				line-height: 1.6;
			}

			ul, ol {
				margin-bottom: 15px;
				padding-left: 20px;

				li {
					margin-bottom: 8px;
				}
			}

		}
		/* Mejorar la separación entre párrafos */
		p + p {
			margin-top: 25px;
		}

		details[open] summary img {
			transform: rotate(180deg);
		}

		details {
			margin-bottom: 20px;
			border-bottom: 1px solid #eee;
			padding-bottom: 15px;
		}

		/* Estilo para el globus de "Model del qualitat del CFCC" */
		.globus-model-qualitat {
			/* position: relative;
			overflow: hidden;  */
			right: 20px;
			top: 200px;
			width: 300px;
			display: flex;
			flex-direction: column;
			gap: 15px;
			margin-right: 250px;
			padding: 20px;
			z-index: 1000;
			background: #fff;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
	
		}

		/* Estilo para el enlace dentro del globo */
		.enllac-model-qualitat {
			display: inline-flex;
			padding: 10px;
			justify-content: center;
			gap: 8px;
			/* border-radius: 5px; */
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
			transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s; /* Agregado para la transición del crecimiento y sombra */
			font-size: 18px;
			font-weight: bold;
			color: #333;
			text-decoration: none;
			background-color: #f5f5f5;

			align-items: center;
			text-align: center;
			.icona-enllac {
				width: 12px;
				height: 12px;
				vertical-align: middle;
			}
		}

		/* Estilo al pasar el ratón sobre el enlace */
		.enllac-model-qualitat:hover {
			text-decoration: underline;
			transform: scale(1.08);
			box-shadow:
			0px 10px 24px rgba(0, 0, 0, 0.3),
			0px 3px 10px rgba(0, 0, 0, 0.15),
			0px -2px 6px rgba(0, 0, 0, 0.08);
			color: #333;
		}
	}
	    #btnScrollTop {
			position: fixed;
			bottom: 100px;
			right: 10%;
			z-index: 1000;
			background-color: #c00;
			color: white;
			border: none;
			padding: 10px 15px;
			border-radius: 50%;
			font-size: 20px;
			cursor: pointer;
			display: none; /* oculto por defecto */
			box-shadow: 0 2px 5px rgba(0,0,0,0.3);
			&:hover {
				background-color: #b40e0e;
			}
		}

	/* Estils Peu */
	.footer-guia {
		width: 100%;;
		margin-top: auto;
		margin: 0;
		margin-top: 20px;
		padding: 0;
		position: absolute;
  		left: 0px;
		bottom: 0px;
  		z-index: 9999;
		font-family: Arial, sans-serif;
		

		/* nav:first-of-type {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 40px;
			background-color: #f9f9f9;
			font-size: 14px;
			color: #333;

			p {
				margin: 0;
				flex: 1;
				text-align: center;
			}

			#logos-XXSS {
				display: flex;
				margin-right: 25%;
				gap: 8px;

				a {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					padding: 10px;
					border-radius: 50%;
					transition: background-color 0.3s;
					background-color: #eceaea;

					img {
						width: 12px;
						height: 12px;
						transition: filter 0.3s;
					}

					&:hover {
						background-color: #222;

						img {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}

		nav:nth-of-type(2) {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 5px 40px;
			align-items: center;
			background-color: #222;
			color: white;


			.logoPeuGeneral img {
				height: 30px;
				margin-left: 250px;
			}

			.enllacos-peu {
				display: flex;
				flex-wrap: wrap;
				margin-right: 150px;
				gap: 10px;
				font-size: 12px;
				align-items: center;

				a {
					color: white;
					text-decoration: none;
					display: flex;
					align-items: center;
				}

				.icona-enllac {
					width: 12px;
					height: 12px;
					margin-left: 5px;
					filter: invert(1) brightness(100%);
				}
			}
		} */
	}
		footer {
		width: 100%;;
		margin-top: auto;
		margin: 0;
		padding: 0;
		position: relative;
  		left: 0px;
		bottom: 0px;
  		z-index: 9999;
		font-family: Arial, sans-serif;
		

		nav:first-of-type {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 40px;
			background-color: #f9f9f9;
			font-size: 14px;
			color: #333;

			p {
				margin: 0;
				flex: 1;
				text-align: center;
			}

			#logos-XXSS {
				display: flex;
				margin-right: 25%;
				gap: 8px;

				a {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					padding: 10px;
					border-radius: 50%;
					transition: background-color 0.3s;
					background-color: #eceaea;

					img {
						width: 12px;
						height: 12px;
						transition: filter 0.3s;
					}

					&:hover {
						background-color: #222;

						img {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}

		nav:nth-of-type(2) {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 5px 40px;
			align-items: center;
			background-color: #222;
			color: white;


			.logoPeuGeneral img {
				height: 30px;
				margin-left: 250px;
			}

			.enllacos-peu {
				display: flex;
				flex-wrap: wrap;
				margin-right: 150px;
				gap: 10px;
				font-size: 12px;
				align-items: center;

				a {
					color: white;
					text-decoration: none;
					display: flex;
					align-items: center;
				}

				.icona-enllac {
					width: 12px;
					height: 12px;
					margin-left: 5px;
					filter: invert(1) brightness(100%);
				}
			}
		}
	}
	/* Avis de càrrega */
	.aviso-carrega {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.95);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		font-family: Arial, sans-serif;
	}

	.aviso-contingut {
		text-align: center;
		background: white;
		padding: 2rem;
		border-radius: 10px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		border: 1px solid #e0e0e0;
		max-width: 300px;
	}

	.aviso-spinner {
		width: 40px;
		height: 40px;
		border: 3px solid #f3f3f3;
		border-top: 3px solid #b40e0e;
		border-radius: 50%;
		/* Estado inicial: sin giro */
		transform: rotate(0deg);
		/* Transición para completar 1 vuelta en ~0.9s (como la barra) */
		transition: transform 0.9s linear;
		will-change: transform;
		margin: 0 auto 1rem;
	}


	.aviso-carrega p {
		margin: 0;
		color: #333;
		font-size: 16px;
		font-weight: bold;
	}

	.aviso-descripcio {
		font-size: 14px !important;
		font-weight: normal !important;
		color: #666 !important;
		margin-top: 0.5rem !important;
		margin-bottom: 1rem !important;
	}
		
	}
/* Asegura que el contenedor principal nunca quede debajo de los menús fijos */
.contenidor-info, #contenidor-info, .contingut-dret {
  scroll-margin-top: 156px; /* misma altura de los menús */
}
/* suaviza el ajuste cuando se aplica padding-top dinámico */
.contingut-dret,
.globus-de-preguntes.sidebar-faq {
  transition: padding-top 0.12s ease;
}