/* ========================================================================= */
/* Enlaces a Repositorios de Iconos                                          */
/* ========================================================================= */
		@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
		@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');
		@import url('https://unicons.iconscout.com/release/v4.0.0/css/line.css');

/* =========================================================================================================================================== */
/* 1. ESTILOS COMUNES Y BASE (GENERALES) + ESTILOS DE PÁGINA CONTENIDOS ORGANIZADOS HOME, GENERALES, LAS DE PRIMER NIVEL TIPO TARJETAS COLUMNA */
/* (Unificación de estilos-paginas-primer-nivel.css y estilos-paginas-segundo-nivel-columnas.css)                                              */
/* =========================================================================================================================================== */
/* ========================================================================= */
/* Estilos para el formulario de búsqueda                                    */
/* ========================================================================= */
		.contenedor-buscador {
			/* Centrado Horizontal (funciona porque seccion-principal-raiz ya es flex) */
		  //  width: 100%;
			display: flex;
			justify-content: center;
			/* Margen/Gap Vertical (superior e inferior) */
			margin: 40px 0; 
			padding: 0 20px;
		}
		.form-buscador {
			/* Formulario más ancho y centrado dentro del contenedor */
			width: 60%;
			//max-width: 80%; /* Ancho máximo deseado */
			display: flex;
			flex-direction: column; /* Apila Label y el grupo de Input/Botón */
			align-items: center; /* Centra horizontalmente los elementos hijos (Label) */
			text-align: center;
		}
		.label-buscador {
			/* Texto acorde a la línea de la página** y color consistente */
			font-family: var(--font-family-base); 
			font-size: 1.2rem;
			font-weight: bold;
			color: var(--color-titulo-tarjeta-texto); 
			margin-bottom: 15px; /* Gap entre la etiqueta y el campo de búsqueda */
		}
		.grupo-input-buscador {
			display: flex;
			width: 100%;
			align-items: center;
			gap: 10px; /* Gap entre el campo de texto y el botón */
		}
		.input-buscador {
			flex-grow: 1; /* Permite que ocupe todo el espacio disponible (haciéndolo **más ancho**) */
			padding: 12px 15px;
			border: 1px solid var(--color-tarjeta-borde);
			border-radius: 4px;
			//font-size: 16px;
			font-size:1.143rem;
			line-height: 1.5;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
			transition: border-color 0.3s;
		}
		.input-buscador:focus {
			border-color: var(--color-cabecera-seccion-padre-fondo); /* Color principal del tema al enfocar */
			outline: none;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
		.boton-buscador {
			/* Estilo del botón consistente con el resto de botones de la página (Nivel 1) */
			background-color: var(--color-boton-enlace-nivel1-fondo);
			color: var(--color-boton-enlace-nivel1-texto);
			border: none;
			padding: 12px 20px;
			border-radius: 4px;
			//font-size: 16px;
			font-size:1.143rem;			
			font-weight: bold;
			cursor: pointer;
			transition: background-color 0.3s, opacity 0.3s;
			white-space: nowrap;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.boton-buscador:hover {
			opacity: 0.9;
		}
		.boton-buscador i {
			margin-right: 8px;
		}
/* ========================================================================= */
/* Estilos estructura contenidos                                             */
/* ========================================================================= */
		/*Quitamos línea vertical en tarjetas de los títulos*/
		h3 {
			border-left: none !important;
		}
		/* Estilos de contenedor raíz (para contenidos organizados - Home) */
		.seccion-principal-raiz {
			//font-family: var(--font-family-base);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20px;
			box-sizing: border-box;
			width: 80%;
			margin: 0 auto;
		}
		/* Estilos de contenedor principal (para páginas de pimer y segundo nivel) */
		.seccion-principal {
			//font-family: "Helvetica", sans-serif;
			display: flex;
			flex-direction: column; /* Cambiado para mejor flujo en todas las páginas */
			justify-content: center;
			align-items: center;
			//padding: 20px;
			box-sizing: border-box;
			width: 100%;
			margin: 0 auto;
		}
		/* Estilo para los H2 convertidos a botón (cabecera-enlace) */
		.cabecera-enlace {
			display: block;
			text-decoration: none;
			cursor: pointer;
			transition: background-color 0.2s, opacity 0.2s;
			box-sizing: border-box;
			transition: all 0.2s ease;
			border-radius: 40px; 
		}
		.cabecera-enlace:hover {
			opacity: 0.9;
		}
		/* Encabezado principal de sección (H2) */
		.cabecera-seccion-padre {
			//font-size: 20px;
			font-size: 1.429rem;
			font-weight: bold;
			padding: 20px;
			//margin-bottom: 30px;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			text-align: center;
			background: var(--color-cabecera-seccion-padre-fondo);
			color: var(--color-cabecera-seccion-padre-texto);
			width: 100%;
			box-sizing: border-box;
		}
		/* Contenedor de tarjetas (grid para 3 columnas - nivel 1) */
		.contenedor-seccion-principal {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30px;
			width: 100%;
			margin: 30px auto 30px auto;
		}

		/* Estilo base de tarjeta en columna*/
		.tarjeta-columna {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			background: var(--color-tarjeta-fondo);
			/*border: 1px solid var(--color-tarjeta-borde);*/
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		
		/*Efecto al situarnos sobre la tarjeta columna*/
		.tarjeta-columna:hover, .tarjeta-fila:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		}
		
		/*Quitamos efecto sobre las tarjetas presentación y la introducción*/
		#tarjeta-presentacion, .tarjeta-columna .introduccion-seccion {
			transform: none;
		}
		#tarjeta-presentacion .subtitulo-cabecera i {
			color: var(--color-titulo-tarjeta-texto);
		}
	
		/* Elementos internos de la tarjeta */
		 .icono-y-titulo {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;	
			min-height: 40px; /* Asegura un mínimo para evitar saltos de contenido */
		}
		.tarjeta-columna .icono-tarjeta, .boton-contenedor-accion .icono-tarjeta {
			//font-size: 36px;
			font-size: 2.25rem;
			margin-bottom: 10px;
			color: var(--color-titulo-tarjeta-texto);
		}
		
		.tarjeta-columna .titulo-tarjeta {
			//font-size: 18px;
			font-size: 1.286rem;
			font-weight: 400;
			line-height: 1.3;
			text-align: left;   
			margin: 0;
			color: var(--color-titulo-tarjeta-texto);
			/*margin-top: 0;
			margin-bottom: 10px;
			min-height: 40px;*/ /* Asegura un mínimo para títulos de una o dos líneas */	
		}
        .linea-separacion {
            width: calc(100% - 10px);
            height: 0;
            margin: 10px 0;
            border-width: 2px;
            border-style: solid;
			border-top: 1px solid var(--color-linea-separacion-borde);
			/*border-color: var(--color-linea-separacion-borde);*/			
        }
		/* Atributos para la tarjeta de presentación */
		#tarjeta-presentacion{margin-bottom:20px;}
		#tarjeta-presentacion > .linea-separacion{border-width:2px;}
		/* Propiedades para el contenido de la tarjeta columna, descripción y botón */
		.tarjeta-columna .contenido-tarjeta {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;	
			width: 100%;
		}
		/*
		.tarjeta-columna .descripcion-tarjeta, .tarjeta-columna .descripcion {
			font-size: 14px;
			margin-bottom: 15px;
			color: var(--color-tarjeta-descripcion-texto);
		}
		*/
        .tarjeta-columna .descripcion {
            //font-size: 14px;
			font-size: 1rem;
            font-weight: normal;
            line-height: 1.3;
            text-align: center;
            margin-top: 5px;
            margin-bottom: 20px;
        }
		/* Botón de Enlace Nivel 1 (Usado en Home y nivel 1) */
		.boton-enlace-nivel1 {
				/*	width: 138px;*/
					//width: 60%;
					height: 32px;
					padding: 0px 10px;
				 /* border-width: 1px;
					border-style: solid;*/
					border-radius: 15px;
					//font-family: "Helvetica", sans-serif;
					font-weight: bold;
					//font-size: 14px;
					font-size: .85rem;
					text-decoration: none !important;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					margin-top: auto;
				   /* display: inline-block;
					padding: 10px 20px;*/
					background: var(--color-boton-enlace-nivel1-fondo);
					color: var(--color-boton-enlace-nivel1-texto);
					/*border: 1px solid var(--color-boton-enlace-nivel1-borde-color);
				    border-radius: 5px;
					text-decoration: none;
					font-weight: bold;
					margin-top: auto;*/
					transition: background-color 0.2s, opacity 0.2s;
		}
		.boton-enlace-nivel1:hover {
			opacity: 0.9;
		}
		.boton-enlace-nivel1 .icono-boton {
            //font-size: 14px;
			font-size: 1rem;
			margin-left: 3px;
        }		
		.tooltip-contenedor .boton-enlace-nivel1 {
			//width: 100%;
			margin: 0 auto;
		}
		#seccion-estructura-conoce-portal .tooltip-contenedor {
			width: 60%;
			margin: 0 auto;
		}
/* ========================================================================= */
/* Estilo para los botones destacados de una sección 						 */
/* ========================================================================= */
		/* Botón Destacado de Sección (Usado en Contenidos Organizados para acceder a Conoce este portal) */
        .boton-destacado-seccion {
            /* Mantenemos las mismas propiedades flexibles que en el css principal para que el texto se adapte y el boton crezca/encoja */
 			/* Flexbox para centrado y alineación */
			display: flex; 
			flex-direction: row; 
			justify-content: center; /* Centrado horizontal (del grupo icono + texto) */
			align-items: center; /* Centrado vertical (alineación al centro del botón) */
			gap: 8px; 
			padding: 10px 18px; /* Padding interno más amplio para el texto */
			height: 60px; /* Aseguramos una altura mínima para que se vea bien */
			//width: 20%;
			/* Adaptabilidad del Texto */
			white-space: normal; /* Permite que el texto se rompa en varias líneas */
			text-align: center; /* Centra el texto en caso de que ocupe varias líneas */
			/* Flexibilidad del Ancho */
			flex-grow: 1; /* Permite que los botones crezcan y ocupen el espacio disponible */
		   /* flex-basis: 0; *//* Trabaja junto con flex-grow: 1 para una distribución equitativa */
			/* Resto de estilos estructurales */
			text-decoration: none;
			font-weight: bold;
			font-size: 1.429rem;
			box-sizing: border-box;
			transition: all 0.2s ease;
			border-radius: 40px; 
			border: 1px solid;
			flex-shrink: 1; /* Permite que los botones se encojan si no hay suficiente espacio */
			transition: all 0.2s ease;
			background: var(--color-boton-enlace-nivel0-fondo);
			border-color: var(--color-boton-enlace-nivel0-borde-color);
			color: var(--color-boton-enlace-nivel0-texto);      
 /*           background: var(--color-boton-enlace-nivel1-fondo);
            border: var(--color-boton-enlace-nivel1-borde) var(--color-boton-enlace-nivel1-borde-color);
            color: var(--color-boton-enlace-nivel1-texto);*/
        }
		.boton-destacado-seccion:hover, .boton-destacado-seccion:focus {
			//background: var(color-boton-enlace-nivel1-fondo); 
			//color: var(--color-boton-enlace-nivel2-texto); 
			opacity: 0.9;
			transform: translateY(-2px);
		}
		.boton-destacado i {
			//color: var(--color-boton-enlace-nivel1-texto);
			//font-size: 20px;
			font-size: 1.429rem;
			margin-right: 5px;
		}
		/* Sección y contenedor de Destacados (Sección de enlaces inferior) en la home */
		.seccion-destacados {
			width: 100%;
			margin: 20px auto;
			text-align: center;
		}
		.contenedor-destacados, .contenedor-menu-asistencia {
			display: grid; /* Habilitamos Grid para pantallas grandes; luego se transforma a flex para que se centren elementos y se adapten*/
			grid-template-columns: repeat(5, 1fr);
			justify-content: center; /* Centramos el grupo de botones horizontalmente */
			gap: 10px;
			padding: 10px 0;
			list-style:	none;
		}
		/*
		.contenedor-menu-asistencia{
			grid-template-columns: repeat(4, 1fr);			
		}*/
		
		/* Boton destacado, tanto para la sección de Destacados como para otros botones diferentes destacados */
		.boton-destacado {
			display: flex; /* Flexbox para centrado y alineación */
		//	flex-direction: row; 
			justify-content: center; /* Centrado horizontal (del grupo icono + texto) */
			align-items: center; /* Centrado vertical (alineación al centro del botón) */
		//	gap: 8px; 
			padding: 10px 18px; /* Padding interno más amplio para el texto */
			height: 60px; /* Aseguramos una altura mínima para que se vea bien */
		//	width: 20%; /* Ancho relativo para que se adapte según tamaño tarjeta */
			/* Adaptabilidad del Texto */
			white-space: normal; /* Permite que el texto se rompa en varias líneas */
			text-align: center; /* Centra el texto en caso de que ocupe varias líneas */
			/* Flexibilidad del Ancho */
			flex-grow: 1; /* Permite que los botones crezcan y ocupen el espacio disponible */
		   /* flex-basis: 0; *//* Trabaja junto con flex-grow: 1 para una distribución equitativa */
			flex-shrink: 1; /* Permite que los botones se encojan si no hay suficiente espacio */
			/* Resto de estilos estructurales */
			text-decoration: none;
			font-weight: bold;
			//font-size: 14px;
			font-size: 1rem;
			box-sizing: border-box;
			transition: all 0.2s ease;
			border-radius: 20px; 
			border: 1px solid;
			transition: all 0.2s ease;
			background: var(--color-boton-enlace-nivel0-fondo);
			border-color: var(--color-boton-enlace-nivel0-borde-color);
			color: var(--color-boton-enlace-nivel0-texto);
		}
		.boton-destacado:hover, .boton-destacado-seccion:hover {
			background-color: var(--color-cabecera-seccion-texto);
			color: var(--color-cabecera-seccion-fondo);
			cursor: pointer;
			border: 1px solid;
		}
		.boton-menu{
			background: var(--color-base-tema-azul-oscuro);
			border-color: var(--color-base-tema-azul-oscuro);
			color: var(--color-base-tema-azul-claro);	
			font-size: 0.8rem;
			padding: 0px 0px;
		}
		.boton-menu:hover{
			background: var(--color-base-tema-azul-claro);
			border-color: var(--color-base-tema-azul-oscuro);
			color: var(--color-base-tema-azul-oscuro);		
		}

		/* Definimos el estado base del enlace (color claro, sin subrayado) */
		li.boton-destacado.boton-menu a {
			color: var(--color-base-tema-azul-claro);
			text-decoration: none;
		}

		/* Se define el estado hover (color oscuro) cuando el ratón pasa por el LI (el botón completo) */
		li.boton-destacado.boton-menu:hover a {
			color: var(--color-base-tema-azul-oscuro);
		}
		/* Se define el fondo del botón en hover para que el botón completo reaccione */
		li.boton-destacado.boton-menu:hover {
			background-color: var(--color-base-tema-azul-claro); 
		}
			
		/* Estilo para quitar el subrayado a los enlaces dentro de los Destacados */
		.seccion-destacados .boton-destacado a {
			text-decoration: none;
			color: inherit; 
		}
		
		#contenidos-organizados.boton-destacado, #contenidos-organizados.boton-destacado-seccion {
			align-items: center;
			width: 70%;
			/* Propiededaes para centrar el elemento */
			margin-left: auto;
			margin-right: auto;
		}
		
		/*Ajustamos tamaños para los botones destacados de la sección de contenidos destacados muestren el texto algo más pequeño */
	/*	.contenedor-destacados .boton-destacado{
			font-size: 0.8em;
		}*/
/* ========================================================================= */
/* Subtítulo de una cabecera, Subtitulo explicativo y Tooltip                */
/* ========================================================================= */		
		/*Subtítulo de una cabecera*/
		.subtitulo-cabecera{
		    //font-size: 16px;
			font-size: 1.143rem;
            font-weight: 400;
            line-height: 1.3;
            width: 100%;
			color: var(--color-tarjeta-descripcion-texto);
		}
		.subtitulo-cabecera i {
			margin-right: 5px;
		}
		/*Subtitulo explicativo, reduciendo tamaño*/
		.subtitulo-explicativo{
		    //font-size: 16px;
			font-size: 1rem;
			width:100%;
		}		
	/* Tooltip */
        .tooltip-contenedor {
            position: relative;
            //display: inline-block;
			//width: 100%;
			display: flex;
			justify-content: right;			
        }

		.tooltip-texto {
	        visibility: hidden;
            width: 200px;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 120%;
            left: 80%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
			background-color: var(--color-tooltip-texto-fondo);
			color: var(--color-tooltip-texto-texto);
		}	
		/* Para la página de conoce este portal adaptamos el tooltip para que se muestre al lado derecho */
		#pagina-conoce-portal .tooltip-texto {
			left: 80%; /* Lo mueve completamente fuera del elemento ancla hacia la derecha */
			bottom: -50%;  
			top: 0%;  /*Alinea verticalmente al centro de su elemento ancla */
			margin-left: 10px; 
		}
        .tooltip-contenedor:hover .tooltip-texto {
            visibility: visible;
            opacity: 1;
        }

/* ========================================================================= */
/* 3. ESTILOS ESPECÍFICOS PARA PÁGINAS DE PREGUNTAS FRECUENTES (FAQ)         */
/* ========================================================================= */
		.seccion-contenedor-faq{
			width: 100%;
		}
		.contenedor-faq-acordeon {
			width: 100%;
			max-width: 1200px; /* Ancho máximo para el bloque de contenido */
			margin: 30px auto 50px auto;
		}

		.faq-elemento {
			margin-bottom: 15px;
			border: 1px solid var(--color-tarjeta-borde);
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
			background-color: var(--color-tarjeta-fondo);
		}

		.faq-acordeon {
			/* Eliminar el marcador nativo del navegador (triángulo/flecha) */
			list-style: none;
			padding: 0;
			margin: 0;
		}

		/* Esconder el marcador nativo del summary en algunos navegadores */
		.faq-acordeon::-webkit-details-marker {
			display: none;
		}
		.faq-acordeon::marker {
			display: none;
		}

		.faq-pregunta {
			display: flex;
			align-items: center;
			padding: 20px 25px;
			cursor: pointer;
			font-weight: bold;
			font-size: 1.2rem;
			color: var(--color-titulo-tarjeta-texto); /* Usa el color principal del tema */
			background-color: transparent;
			border-radius: 8px;
			transition: background-color 0.2s;
		}

		.faq-pregunta:hover {
			background-color: var(--color-cabecera-seccion-fondo); /* Tono claro del tema */
		}

		/* Icono fijo a la izquierda de la pregunta */
		.faq-icono {
			display: inline-flex;
			margin-right: 15px;
			font-size: 1.3rem;
			color: var(--color-titulo-tarjeta-texto);
			line-height: 1;
		}

		/* Icono de + / - al final de la pregunta */
		.faq-pregunta::after {
			content: '\002B'; /* Símbolo '+' unicode */
			font-family: 'Tabler Icons'; /* Usa su librería de iconos */
			font-size: 1.1rem;
			font-weight: normal;
			margin-left: auto;
			color: var(--color-icono-tarjeta-reducida-texto);
			transition: transform 0.2s;
		}

		/* Icono '-' cuando el acordeón está abierto */
		.faq-acordeon[open] > .faq-pregunta::after {
			content: '\2212'; /* Símbolo '-' unicode */
			transform: rotate(0deg); /* No se necesita rotar, solo cambiar el símbolo */
		}

		/* Contenido de la respuesta */
		.faq-respuesta {
			padding: 0 25px 25px 25px;
			border-top: 1px solid var(--color-tarjeta-borde);
			font-size: 1rem;
			color: var(--color-tarjeta-descripcion-texto, #333);
			line-height: 1.6;
		}

		.faq-respuesta p {
			margin-top: 15px;
			margin-bottom: 0;
		}

		/* Estilo para accesibilidad: ocultar el H3 de forma visual pero mantenerlo para lectores de pantalla */
		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: 0;
		}

		/* Estilo para marcar la pregunta activa del acordeón */
		.faq-acordeon[open] > .faq-pregunta {
			background-color: var(--color-cabecera-seccion-fondo); /* Color de fondo de sección */
			border-radius: 8px 8px 0 0; /* Bordes redondeados solo arriba */
		}

		/* El contenido desplegado también debe tener un borde y fondo para un buen look */
		.faq-acordeon[open] > .faq-respuesta {
			border-bottom: 2px solid var(--color-cabecera-seccion-fondo);
			border-left: 1px solid var(--color-cabecera-seccion-fondo);
			border-right: 1px solid var(--color-cabecera-seccion-fondo);
			padding: 15px 20px;
			border-radius: 0 0 8px 8px; /* Bordes redondeados solo abajo */
			background-color: #f9f9f9; /* Fondo muy ligero para diferenciar */
			text-align: left;
		}
/* ========================================================================= */
/* ESTILOS UNIFICADOS CON VARIABLES (ÚNICA REGLA PARA TODAS LAS TARJETAS)    */
/* ========================================================================= */	
		/* Icono principal y Título */
		.tarjeta-columna .icono-tarjeta, 
		.tarjeta-columna .titulo-tarjeta { 
			color: var(--color-titulo-tarjeta-texto); 
		}

		/* Icono en tarjetas reducidas (ej. en listados de segundo nivel) */
		.tarjeta-columna .icono-tarjeta-reducida {
			color: var(--color-icono-tarjeta-reducida-texto);
		}

		/* Línea de Separación */
		.tarjeta-columna .linea-separacion { 
			border-color: var(--color-linea-separacion-borde); 
		}

		/* Botón de Enlace Nivel 1 (Fondo, Borde y Texto) */
		.tarjeta-columna .boton-enlace-nivel1 { 
			background: var(--color-boton-enlace-nivel1-fondo);
			border-color: var(--color-boton-enlace-nivel1-borde-color);
			color: var(--color-boton-enlace-nivel1-texto);
			/* Asegúrese de que el borde tenga un estilo para que border-color funcione */
			border-style: solid;
			border-width: 1px; /* O el grosor que desee */
			margin: 0 auto;
			width:60%;
		}  
		.tarjeta-columna .tooltip-contenedor {
			width: 100%;
		}		
		.tarjeta-columna .tooltip-contenedor .boton-enlace-nivel1{
			/* 20251109 width:100%;			*/
			width: 60%;
		}
		.seccion-principal-raiz .boton-enlace-nivel1 { color: #ffffff; }
		/*Para el caso de que el numero de tarjetas columna se 4 o 7, donde solo queda una tarjeta en última fila, y que se centre*/
		.contenedor-seccion-principal > article:last-of-type:nth-child(4), .contenedor-seccion-principal > article:last-of-type:nth-child(7) {
				grid-column: 2 / span 1; /* Centra el cuarto y séptimo elemento en la fila */
		}
/* ========================================================================= */
/* CSS específico de página general, como "Conoce este Portal"               */
/* ========================================================================= */	
				
		/* Icono bombilla en la tarjeta de presentación */
		.icono-presentacion-color {
			color: var(--color-titulo-tarjeta-texto);
		}
		/* Lista de enlaces en las tarjetas informativas (ul) */
		.lista-enlaces-externos {
			list-style-type: none;
			padding: 15px 0 0 0;
		}
		/* Elemento de lista (li) para dar margen inferior */
		.lista-enlaces-item {
			margin-bottom: 8px;
		}
		/* Icono de enlace externo (primer item en la lista o destacado) */
		.icono-enlace-externo-principal {
			color: var(--color-icono-tarjeta-reducida-texto);
			margin-right: 5px;
		}
		/* Icono de enlace externo (demás items) */
		.icono-enlace-externo-secundario {
			color: var(--color-titulo-tarjeta-texto);
			margin-right: 5px;
		}
		/* Enlaces (a) de la lista: negrita y sin subrayado */
		.enlace-lista-bold {
			color: var(--color-titulo-tarjeta-texto);
			text-decoration: none;
			font-weight: bold;
		}	
			
        /* Estilos generales para tarjetas informativas */
        .tarjeta-informativa {
            background-color: var(--color-cabecera-seccion-fondo);
            //border: 1px solid var(--color-tarjeta-borde);
            padding: 30px;
            margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            text-align: left;
        }
        .tarjeta-informativa h3 {
            color: var(--color-titulo-tarjeta-texto);
            //font-size: 18px;
			font-size: 1.286rem;
            margin-bottom: 10px;
        }
		
        .tarjeta-informativa ol {
        //    color: var(--color-titulo-tarjeta-texto);
            margin-top: 15px;
			padding-left: 20px;
        }		
        
        /* Ajuste para las nuevas introducciones */
        .introduccion-seccion {
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: var(--color-tarjeta-fondo); 
          //  border: 1px solid var(--color-tarjeta-borde);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            padding: 20px;
        }
        .introduccion-seccion .linea-separacion {
            margin-top: 15px;
            margin-bottom: 0;
            border-width: 1px;
        }
        
        /* Estilos de las tarjetas de Módulos /Secciones(para los 3x2, 3x1, etc.) */
        .tarjeta-modulo .icono-y-titulo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-bottom: 10px;
            min-height: 40px; 
        }
        .tarjeta-modulo .icono-tarjeta {
            //font-size: 32px;
			font-size: 2.286rem;
            margin-right: 10px;
        }
        .tarjeta-modulo .descripcion {
            text-align: center;
            flex-grow: 1;
        }
        
        /* Sección-módulo de Acceso a la información (diseño para que ocupe todo el ancho) */
        .modulo-acceso-tarjeta {
            grid-column: span 3;
        }
        .modulo-acceso-tarjeta .contenido-tarjeta {
            display: flex;
            gap: 20px;
            text-align: left;
        }
        .modulo-acceso-tarjeta .accesibilidad-recursos {
            flex-shrink: 0;
            width: 300px;
            padding-left: 20px;
            border-left: 1px solid var(--color-linea-separacion-borde);
        }
		.modulo-acceso-tarjeta .boton-destacado{
			margin: 30px auto 0 auto;
			width: 30%;
		}
		/* Estilos para el encabezado de la lista */
		.subtitulo-tarjeta-lista {
			//font-size: 16px;
			font-size: 1.143rem;
			margin-top: 15px;
			margin-bottom: 5px;
			color: var(--color-titulo-tarjeta-texto);
		}

		/* Estilos para la lista de características */
		.lista-caracteristicas {
			text-align: left;
			padding-left: 20px;
			margin-bottom: 15px;
			//font-size: 15px;
			font-size: 1.071rem;
		}

		/* Estilos para cada elemento de la lista */
		.item-caracteristica {
			margin-bottom: 5px;
		}

		/* Estilos para el icono dentro de la lista */
		.icono-caracteristica-lista {
			margin-right: 5px;
			color: var(--color-titulo-tarjeta-texto); 
		}

		/* Estilos del contenedor principal: alineación horizontal */
		.tarjeta-columna .caja-consejo {
			/* Mantiene estilos de apariencia... */
			padding: 15px;
			border-radius: 8px;
			margin-top: 20px;
			display: flex;             /* Activa Flexbox */
			align-items: center;       /* Centra los ítems (el texto agrupado y el botón) verticalmente */
			gap: 20px;                 /* Añade espacio entre el texto y el botón */
			border-left: 4px solid var(--color-linea-separacion-borde);
			background-color: var(--color-ligero-fondo); /* Usa el fondo más claro que la sección, para los consejos */}

		/* Nuevo contenedor de texto, permite que el texto sea una undad agrupada */
		.caja-consejo-texto {
			flex-grow: 1; /* Permite que este contenedor use el espacio disponible antes de empujar el botón */
		}

		/* Posicionamiento del botón destacado */
		.caja-consejo .boton-destacado {
			margin-left: auto;      /* Empuja el botón a la derecha, ocupando el espacio restante */
			border-color: var(--color-boton-enlace-nivel2-borde-color);
			color: var(--color-boton-enlace-nivel2-texto);	
			background: var(--color-boton-enlace-nivel2-fondo);
		}
		.caja-consejo .boton-destacado:hover {
			background-color: var(--color-cabecera-seccion-texto);
			color: var(--color-cabecera-seccion-fondo);
			cursor: pointer;
			border: 1px solid;
		}


		/*.caja-consejo i:hover {
			color: var(--color-cabecera-seccion-fondo);
		}*/
		.titulo-consejo {
			margin: 0;
			font-size: 1rem;
			font-weight: bold;
			display: flex;
			align-items: center;
			color: var(--color-titulo-tarjeta-texto);	
		}

		.texto-consejo {
			margin: 5px 0 0 0;
			font-size: 1rem;
		}

		/*Hace referencia a los estilos de la sección de buscador de Conoce este Portal*/
		.buscador{
			font-weight: bold; margin: 0; padding: 10px; display: flex; align-items: center; justify-content: center;
		}		
		.icono-buscador{
			color: var(--color-titulo-tarjeta-texto); 
			margin-right: 10px; 
			//font-size: 24px;
			font-size:1.714rem;
		}

		
		#pagina-conoce-portal .contenedor-seccion-principal{
			margin-top:30px;
		}
		
		/* Definición de la animación de movimiento para el icono de destacado Conoce este Portal*/
		@keyframes moverMano {
			0% { transform: translateX(0); }     /* Posición inicial */
			50% { transform: translateX(5px); }  /* Se mueve 5 píxeles a la derecha */
			100% { transform: translateX(0); }   /* Vuelve a la posición inicial */
		}

		/* Estilos para el icono animado */
		.icono-animado {
			/* Aseguramos que el elemento pueda ser transformado (movido) */
			display: inline-block;
			/* Aplicamos la animación */
			animation-name: moverMano; 
			/* Duración de la animación */
			animation-duration: 1.5s; 
			/* Repetir infinitamente */
			animation-iteration-count: infinite; 
			/* Para que el movimiento sea suave */
			animation-timing-function: ease-in-out; 
			/* Espacio entre el icono y el texto */
			margin-left: 10px; 
		}
	
/* ================================================================================== */
/* 1.2. ESTILOS DE PÁGINAS DE SEGUNDO NIVEL (Múltiples Columnas y Tarjetas Reducidas) */
/* ================================================================================== */
        /* Estilos de cabeceras */
        .cabecera-seccion {
            //font-size: 20px;
			font-size: 1.429em;
            font-weight: bold;
            padding: 15px;
            //margin-top: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
		
        /* Contenedores Flexbox para las filas y columnas */
        .contenedor-principal-nivel-columnas {
            display: flex;
            justify-content: center;
            gap: 20px;
            width: 100%;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

        .contenedor-filas {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        /* Estilos de tarjetas tipo fila o listado: divididas en sección izquierda y sección derecha */
        .contenedor-seccion-principal-listado {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
            flex-grow: 1;
        }

        .seccion-columna {
            flex-grow: 0;
            flex-basis: calc(50% - 15px);
            max-width: calc(50% - 15px);
            display: flex;
            flex-direction: column;
        }
        
        .seccion-columna > section {
            flex-grow: 1; 
            display: flex;
            flex-direction: column;
        }
    /*    .cabecera-seccion-padre {
            font-size: 24px;
            font-weight: bold;
            padding: 20px;
          //  margin-bottom: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
			width: 100%;
			box-sizing: border-box;
        }
*/
        .tarjeta-fila {
            display: flex;
            align-items: center;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: left;
            position: relative;
        }

	/* Estilos para tarjetas de segundo nivel (tipo fila) - Desktop/Grande */
		.tarjeta-fila {
			display: flex;
			flex-direction: row; /* Asegura el layout horizontal */
			justify-content: space-between; /* Distribuye el espacio entre secciones */
			align-items: center; /* Alineación vertical centrada de todos los elementos */
			padding: 15px 20px;
		//    margin-bottom: 15px;
			border: 1px solid var(--color-tarjeta-borde);
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		}

		.tarjeta-fila .seccion-izquierda {
			display: flex;
			align-items: center;
			flex-basis: 35%; /* Ajusta el ancho para el título y el icono izquierdo */
			text-align: left;
			min-width: 130px;
		}

		.tarjeta-fila .seccion-derecha {
			display: flex;
			align-items: center;
			flex-basis: 65%; /* Ajusta el ancho para la descripción y el botón */
			text-align: left;
		}

		.tarjeta-fila .icono-tarjeta-reducida {
			//font-size: 24px;
			font-size: 1.714rem;
			margin-right: 15px;
		}

		/* Ajuste específico para el botón y la descripción */
		.tarjeta-fila .seccion-derecha .descripcion {
		  //  margin-right: 20px; /* Espacio antes del botón */
		  //  margin-bottom: 0; /* Elimina el margen inferior */
			//font-size: 14px;
			font-size: 1rem;
			font-weight: normal;
			line-height: 1.3;
			margin: 0;
			flex-grow: 1;    /* Permite que la descripción ocupe el espacio disponible */
			/* MODIFICACIÓN CLAVE: Reduir o eliminar el flex-basis para que la descripción
			   tome solo el espacio que realmente necesita, dejando más espacio al botón, o elimine si no es necesaria. Si se elimina, la propiedad flex-grow: 1 debe funcionar mejor.*/
			flex-basis: auto;
		}

		.tarjeta-fila .seccion-derecha .boton-enlace-nivel2, .caja-consejo .boton-enlace-nivel2 {
		/* Asegurar que el botón tenga un ancho fijo o 'auto' y no width: 100% */
			//width: auto;
			min-width: 100px; 
		}

        .tarjeta-fila .icono-boton {
            //font-size: 14px;
			font-size: 1rem;
			margin-left: 3px;
        }	
		
        .tarjeta-fila .titulo-tarjeta {
            //font-size: 14px;
			font-size: 1rem;
            font-weight: 600;
            line-height: 1.1;
            text-align: left;
            margin: 0;
        }
	
		.tarjeta-fila .boton-enlace-nivel2, .caja-consejo .boton-enlace-nivel2, .elementos-con-botones .boton-enlace-nivel2 {
            width: 90px;
            height: 32px;
            padding: 0 10px;
            border-radius: 15px;
            //font-family: "Helvetica", sans-serif;
            font-weight: bold;
            //font-size: 14px;
			font-size: 1rem;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            flex-shrink: 0;
            margin-left: 20px;
        }
		
	       /* Muestra el icono de la flecha en pantallas grandes */
        .tarjeta .icono-flecha {
            display: inline-block;
        }

        /* Oculta la línea de separación en pantallas grandes */
        .tarjeta-fila .linea-separacion {
            display: none;
        }

		.cabecera-seccion { background: var(--color-cabecera-seccion-fondo); color: var(--color-cabecera-seccion-texto); border: 1px solid var(--color-cabecera-seccion-texto);}
		.cabecera-seccion-padre { background: var(--color-cabecera-seccion-padre-fondo); color: var(--color-cabecera-seccion-padre-texto);}
	
		.linea-separacion { border-color: var(--color-linea-separacion-borde); }

		.tooltip-texto {background-color: var(--color-tooltip-texto-fondo); color: var(--color-tooltip-texto-texto);}

		.tarjeta-fila .boton-enlace-nivel2, 
		.caja-consejo .boton-enlace-nivel2, 
		.elementos-con-botones .boton-enlace-nivel2 { 
			background: var(--color-boton-enlace-nivel2-fondo); 
			border: var(--color-boton-enlace-nivel2-borde); 
			border-color: var(--color-boton-enlace-nivel2-borde-color); 
			color: var(--color-boton-enlace-nivel2-texto);
		}
		.tarjeta-fila .icono-tarjeta-reducida {color: var(--color-icono-tarjeta-reducida-texto);}
		.tarjeta-fila .icono-boton {color: var(--color-icono-boton-texto);}
		.tarjeta-fila .titulo-tarjeta {color: var(--color-titulo-tarjeta-texto);}
		.tarjeta-fila .descripcion {color: var(--color-tarjeta-descripcion);}

/* =============================================================================================== */
/* 2. ESTILOS ESPECÍFICOS POR PÁGINA Y TARJETA COLUMNA HOME(Definición de Variables de Color)      */
/* =============================================================================================== */
		:root {
			/* Tipografía base global */
			--font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
			--font-size-base: 16px;
			/* ... otras variables de color, espaciado, etc. ... */
			--color-cabecera-seccion-padre-fondo: #2c6a9d;
			--color-cabecera-seccion-padre-texto: #ffffff;
			--color-cabecera-seccion-fondo: #d9edf7;
			--color-cabecera-seccion-texto: #2c6a9d;
			--color-tarjeta-fondo: #ffffff;
			--color-tarjeta-borde: #d1c4e9;
			--color-tarjeta-descripcion-texto: #333333;
			--color-titulo-tarjeta-texto: #2c6a9d;
			--color-icono-boton-texto: #2c6a9d;
			--color-icono-tarjeta-reducida-texto: #2c6a9d;
			--color-linea-separacion-borde: #2c6a9d;
			--color-boton-enlace-nivel0-fondo: #2c6a9d;
			--color-boton-enlace-nivel0-borde: 1px solid;
			--color-boton-enlace-nivel0-borde-color: #d9edf7;
			--color-boton-enlace-nivel0-texto: #d9edf7;
			--color-boton-enlace-nivel1-fondo: #2c6a9d;
			--color-boton-enlace-nivel1-borde: 1px solid;
			--color-boton-enlace-nivel1-borde-color: #2c6a9d;
			--color-boton-enlace-nivel1-texto: #d9edf7;
			--color-boton-enlace-nivel2-fondo: #d9edf7;
			--color-boton-enlace-nivel2-borde: 1px solid;
			--color-boton-enlace-nivel2-borde-color: #2c6a9d;
			--color-boton-enlace-nivel2-texto: #2c6a9d;	
			--color-tooltip-texto-fondo: #f9f8dd;
			--color-tooltip-texto-texto: #990924;				
			--color-base-tema-azul-oscuro: #2c6a9d;
			--color-base-tema-azul-claro: #d9edf7;
			--color-base-ligero: #e9f3f7;
			--color-base-tema-granate: #990924;
			

		}
		/* Aplicación de la variable al cuerpo del documento */
		html {
			font-family: var(--font-family-base);
			font-size: var(--font-size-base);
			line-height: 1.2; 
		}

		/* --- Bloque para Tarjetas Institucionales (Azul) --- */
		/* Estas variables ahora se aplican a cualquier elemento con la clase .tarjeta-columna.institucional */
		.tarjeta-columna.institucional {
			/* Mantiene las variables, pero las define en la tarjeta, no en el ID de página */
			--color-titulo-tarjeta-texto: #0056B3;
			--color-icono-tarjeta-reducida-texto: #0056B3;
			--color-linea-separacion-borde: #0056B3;
			--color-boton-enlace-nivel1-fondo: #0056B3;
			--color-boton-enlace-nivel1-borde-color: #0056B3;
			--color-boton-enlace-nivel1-texto: #ffffff;
		}
		/* Estas variables ahora se aplican a cualquier elemento con la clase .tarjeta-columna.economica */
		/* --- Bloque para tarjetas económicas (Verde) --- */
		.tarjeta-columna.economica {
			/* Definición de variables verde en la tarjeta económica */
			--color-titulo-tarjeta-texto: #257500; /* Use el color de texto definido: #257500 */
			--color-icono-tarjeta-reducida-texto: #257500;
			--color-linea-separacion-borde: #2b8800;
			--color-boton-enlace-nivel1-fondo: #2b8800;
			--color-boton-enlace-nivel1-borde-color: #2b8800;
			--color-boton-enlace-nivel1-texto: #ffffff;
		}

		/* --- Tarjeta jurídica (rojo/burdeos: #ce2142) --- */
		.tarjeta-columna.juridica {
			--color-titulo-tarjeta-texto: #ce2142;
			--color-icono-tarjeta-reducida-texto: #ce2142;
			--color-linea-separacion-borde: #ce2142;
			--color-boton-enlace-nivel1-fondo: #ce2142;
			--color-boton-enlace-nivel1-borde-color: #ce2142;
			--color-boton-enlace-nivel1-texto: #ffffff;
		}

		/* --- Tarjeta Plan de evaluación y calidad (naranja: #D14600) --- */
		.tarjeta-columna.plan-eval-cal {
			--color-titulo-tarjeta-texto: #D14600;
			--color-icono-tarjeta-reducida-texto: #D14600;
			--color-linea-separacion-borde: #D14600;
			--color-boton-enlace-nivel1-fondo: #D14600;
			--color-boton-enlace-nivel1-borde-color: #D14600;
			--color-boton-enlace-nivel1-texto: #ffffff;
		}

		/* --- Tarjeta Empleo Público (Rosa: #d31e88) --- */
		.tarjeta-columna.empleo-publico {
			--color-titulo-tarjeta-texto: #d31e88;
			--color-icono-tarjeta-reducida-texto: #d31e88;
			--color-linea-separacion-borde: #d31e88;
			--color-boton-enlace-nivel1-fondo: #d31e88;
			--color-boton-enlace-nivel1-borde-color: #d31e88;
			--color-boton-enlace-nivel1-texto: #ffffff;
		}

		/* --- Tarjeta Acceso a la Información (morado: #9404a7) --- */
		.tarjeta-columna.acceso-informacion {
			--color-titulo-tarjeta-texto: #9404a7;
			--color-icono-tarjeta-reducida-texto: #9404a7;
			--color-linea-separacion-borde: #9404a7;
			--color-boton-enlace-nivel1-fondo: #9404a7;
			--color-boton-enlace-nivel1-borde-color: #9404a7;
			--color-boton-enlace-nivel1-texto: #ffffff;
		}

		/*
		.tarjeta-informativa { background: var(--color-cabecera-seccion-fondo); border: 1px solid var(--color-tarjeta-borde); }
.boton-destacado { background: var(--color-boton-enlace-nivel1-fondo); color: var(--color-boton-enlace-nivel1-texto); border-color: var(--color-boton-enlace-nivel1-borde-color); }
.modulo-acceso-tarjeta { background: var(--color-tarjeta-fondo); border: 1px solid var(--color-tarjeta-borde); }
.modulo-acceso-tarjeta .icono-tarjeta { color: var(--color-titulo-tarjeta-texto); }
.modulo-acceso-tarjeta .accesibilidad-recursos { border-left-color: var(--color-linea-separacion-borde); }
*/


		/* --- 2.1. PÁGINA: CONTENIDOS ORGANIZADOS (contenidos-organizados.html) --- */

		#pagina-contenidos-organizados.color-oscuro {
			/* Variables de contenidos-organizados-colores.css (Azul PT y Granate) */
			--color-cabecera-seccion-padre-fondo: #2c6a9d;
			--color-cabecera-seccion-padre-texto: #ffffff;
			--color-cabecera-seccion-fondo: #d9edf7;
			--color-cabecera-seccion-texto: #2c6a9d;
			--color-tarjeta-fondo: #ffffff;
			--color-tarjeta-borde: #e0e0e0;
			--color-tarjeta-descripcion-texto: #000000;
			--color-titulo-tarjeta-texto: #2c6a9d;
			--color-icono-boton-texto: #2c6a9d;
			--color-icono-tarjeta-reducida-texto: #2c6a9d;
			--color-linea-separacion-borde: #9404a7; /* De la línea de la tarjeta institucional */

			/* Botón Destacado de Nivel 0 (Conoce este Portal en Home) */
			--color-boton-enlace-nivel0-fondo: #990924; /* Rojo fuerte */
			--color-boton-enlace-nivel0-borde: 1px solid;
			--color-boton-enlace-nivel0-borde-color: #d9edf7;
			--color-boton-enlace-nivel0-texto: #d9edf7;
			
			--color-boton-enlace-nivel1-fondo: #2c6a9d;
			--color-boton-enlace-nivel1-borde: 1px solid;
			--color-boton-enlace-nivel1-borde-color: #2c6a9d;
			--color-boton-enlace-nivel1-texto: #ffffff;
			--color-ligero-fondo: #e9f3f7;
			
			/* El botón destacado en esta página usa los colores de cabecera-seccion-padre */
			/* Pero si quisiera usar el color nivel0: */
			/*
			#contenidos-organizados.boton-destacado-seccion {
				background: var(--color-boton-enlace-nivel0-fondo);
				color: var(--color-boton-enlace-nivel0-texto);
				border: var(--color-boton-enlace-nivel0-borde) var(--color-boton-enlace-nivel0-borde-color);
			}
			*/
		}
		
		#pagina-contenidos-organizados.color-claro {
		/* Colores para las tarjetas de categoria contenido destacado home y páginas - inversos PT: azul PT y azul claro*/	
			/* Variables por defecto, que serán sobreescritas */
					--color-cabecera-seccion-padre-fondo: #2c6a9d;
					--color-cabecera-seccion-padre-texto: #ffffff;	
					--color-cabecera-seccion-fondo: #d9edf7;
					--color-cabecera-seccion-texto: #2c6a9d;		
					--color-tarjeta-fondo: #ffffff;
					--color-tarjeta-borde: #e0e0e0;
					--color-tarjeta-descripcion: #000000;
					--color-titulo-tarjeta-texto: #2c6a9d;
					--color-icono-boton-texto: #2c6a9d;			
					--color-icono-tarjeta-reducida-texto: #2c6a9d;	
					--color-boton-enlace-nivel0-fondo: #d9edf7;
					--color-boton-enlace-nivel0-borde: 1px solid;
					--color-boton-enlace-nivel0-borde-color: #2c6a9d;			
					--color-boton-enlace-nivel0-texto: #2c6a9d;			
					--color-boton-enlace-nivel1-fondo: #2c6a9d;
					--color-boton-enlace-nivel1-borde: 1px solid;
					--color-boton-enlace-nivel1-borde-color: #2c6a9d;			
					--color-boton-enlace-nivel1-texto: #ffffff;
					--color-boton-enlace-nivel2-fondo: #d9edf7;
					--color-boton-enlace-nivel2-borde: 1px solid;
					--color-boton-enlace-nivel2-borde-color: #2c6a9d;			
					--color-boton-enlace-nivel2-texto: #2c6a9d;			
					--color-tooltip-texto-fondo: #f9f8dd;
					--color-tooltip-texto-texto: #990924;		
					--color-linea-separacion-borde: #2c6a9d;
					--color-ligero-fondo: #e9f3f7;
		}
		#pagina-contenidos-organizados.color-cereza {
		/* Colores para las tarjetas de categoria contenido destacado home y páginas - Otro corporativo*/	
			/* Variables por defecto, que serán sobreescritas */
					--color-cabecera-seccion-padre-fondo: #981D56;
					--color-cabecera-seccion-padre-texto: #ffffff;	
					--color-cabecera-seccion-fondo: #f3e5f5;
					--color-cabecera-seccion-texto: #981D56;		
					--color-tarjeta-fondo: #ffffff;
					--color-tarjeta-borde: #e0e0e0;
					--color-tarjeta-descripcion: #000000;
					--color-titulo-tarjeta-texto: #981D56;
					--color-icono-boton-texto: #981D56;			
					--color-icono-tarjeta-reducida-texto: #981D56;	
					--color-boton-enlace-nivel0-fondo: #f3e5f5;
					--color-boton-enlace-nivel0-borde: 1px solid;
					--color-boton-enlace-nivel0-borde-color: #981D56;			
					--color-boton-enlace-nivel0-texto: #981D56;			
					--color-boton-enlace-nivel1-fondo: #981D56;
					--color-boton-enlace-nivel1-borde: 1px solid;
					--color-boton-enlace-nivel1-borde-color: #981D56;			
					--color-boton-enlace-nivel1-texto: #ffffff;
					--color-boton-enlace-nivel2-fondo: #f3e5f5;
					--color-boton-enlace-nivel2-borde: 1px solid;
					--color-boton-enlace-nivel2-borde-color: #981D56;			
					--color-boton-enlace-nivel2-texto: #981D56;			
					--color-tooltip-texto-fondo: #f9f8dd;
					--color-tooltip-texto-texto: #990924;		
					--color-linea-separacion-borde: #2c6a9d;		
					--color-ligero-fondo: #f3e5f5;

			
			/* El botón destacado en esta página usa los colores de cabecera-seccion-padre */
			/* Pero si quisiera usar el color nivel0: */
			/*
			#contenidos-organizados.boton-destacado-seccion {
				background: var(--color-boton-enlace-nivel0-fondo);
				color: var(--color-boton-enlace-nivel0-texto);
				border: var(--color-boton-enlace-nivel0-borde) var(--color-boton-enlace-nivel0-borde-color);
			}
			*/
		}

		/* --- 2.2. PÁGINA: INFORMACIÓN INSTITUCIONAL  --- */

		#pagina-institucional, #pagina-institucional-nivel2 {
			/* Variables de institucional-colores.css (Azul fuerte) */
			--color-cabecera-seccion-padre-fondo: #0056B3;
			--color-cabecera-seccion-padre-texto: #ffffff;
			--color-cabecera-seccion-fondo: #d9edf7;
			--color-cabecera-seccion-texto: #0056B3;
			--color-tarjeta-fondo: #ffffff;
			--color-tarjeta-borde: #e0e0e0;
			--color-tarjeta-descripcion-texto: #000000;
			--color-titulo-tarjeta-texto: #0056B3;
			--color-icono-boton-texto: #0056B3;
			--color-icono-tarjeta-reducida-texto: #0056B3;
			--color-linea-separacion-borde: #0056B3;

			--color-boton-enlace-nivel1-fondo: #0056B3;
			--color-boton-enlace-nivel1-borde: 1px solid;
			--color-boton-enlace-nivel1-borde-color: #0056B3;
			--color-boton-enlace-nivel1-texto: #ffffff;

			--color-boton-enlace-nivel2-fondo: #d9edf7;
			--color-boton-enlace-nivel2-borde: 1px solid;
			--color-boton-enlace-nivel2-borde-color: #0056B3;
			--color-boton-enlace-nivel2-texto: #0056B3;
			--color-tooltip-texto-fondo: #f9f8dd;
			--color-tooltip-texto-texto: #990924;		
			--color-linea-separacion-borde: #2c6a9d;	
			--color-ligero-fondo: #e7f5fc;			
		}

		/* --- 2.3. PÁGINA: INFORMACIÓN ECONÓMICA  --- */
		#pagina-economica, #pagina-economica-nivel2 {
			/* Variables de economica-colores.css (Verde) */
			--color-cabecera-seccion-padre-fondo: #2b8800;
			--color-cabecera-seccion-padre-texto: #ffffff;
			--color-cabecera-seccion-fondo: #f2ffed;
			--color-cabecera-seccion-texto: #257500;	
			--color-tarjeta-fondo: #ffffff;
			--color-tarjeta-borde: #e0e0e0;
			--color-tarjeta-descripcion-texto: #000000;
			--color-titulo-tarjeta-texto: #257500;
			--color-icono-boton-texto: #257500;			
			--color-icono-tarjeta-reducida-texto: #257500;			
			--color-boton-enlace-nivel1-fondo: #2b8800;
			--color-boton-enlace-nivel1-borde: 1px solid;
			--color-boton-enlace-nivel1-borde-color: #2b8800;			
			--color-boton-enlace-nivel1-texto: #ffffff;
			--color-boton-enlace-nivel2-fondo: #f2ffed;
			--color-boton-enlace-nivel2-borde: 1px solid;
			--color-boton-enlace-nivel2-borde-color: #2b8800;			
			--color-boton-enlace-nivel2-texto: #257500;
			--color-tooltip-texto-fondo: #f9f8dd;
			--color-tooltip-texto-texto: #990924;		
			--color-linea-separacion-borde: #2b8800;
			--color-ligero-fondo: #f2fdee;
			
		}

		/* --- 2.4. PÁGINA: INFORMACIÓN JURIDICA  --- */
		#pagina-juridica, #pagina-juridica-nivel2 {
			/* Variables de juridica-colores.css (rojo) */
			/* Variables por defecto, que serán sobreescritas */
					--color-cabecera-seccion-padre-fondo: #ce2142;
					--color-cabecera-seccion-padre-texto: #ffffff;
					--color-cabecera-seccion-fondo: #fbe8ec;
					--color-cabecera-seccion-texto: #ce2142;			
					--color-tarjeta-fondo: #ffffff;
					--color-tarjeta-borde: #e0e0e0;
					--color-tarjeta-descripcion: #000000;
					--color-titulo-tarjeta-texto: #ce2142;
					--color-icono-boton-texto: #ce2142;			
					--color-icono-tarjeta-reducida-texto: #ce2142;			
					--color-boton-enlace-nivel1-fondo: #ce2142;
					--color-boton-enlace-nivel1-borde: 1px solid;
					--color-boton-enlace-nivel1-borde-color: #ce2142;			
					--color-boton-enlace-nivel1-texto: #ffffff;
					--color-boton-enlace-nivel2-fondo: #fbe8ec;
					--color-boton-enlace-nivel2-borde: 1px solid;
					--color-boton-enlace-nivel2-borde-color: #ce2142;			
					--color-boton-enlace-nivel2-texto: #ce2142;
					--color-tooltip-texto-fondo: #f9f8dd;
					--color-tooltip-texto-texto: #990924;		
					--color-linea-separacion-borde: #ce2142;
					--color-ligero-fondo: #fbe8ec;
					
		}
		/* --- 2.5. PÁGINA: PLANIFICACION, EVALUACION,  CALIDAD  --- */
		/* Colores para las tarjetas de categoria planificacion-evaluacion - naranja fuerte*/	
		#pagina-plan-eval-cal, #pagina-plan-eval-cal-nivel2 {
			/* Variables por defecto, que serán sobreescritas */
					--color-cabecera-seccion-fondo: #f8e7de;
					--color-cabecera-seccion-texto: #D14600;
					--color-cabecera-seccion-padre-fondo: #D14600;
					--color-cabecera-seccion-padre-texto: #ffffff;			
					--color-tarjeta-fondo: #ffffff;
					--color-tarjeta-borde: #e0e0e0;
					--color-tarjeta-descripcion: #000000;
					--color-titulo-tarjeta-texto: #D14600;
					--color-icono-boton-texto: #D14600;			
					--color-icono-tarjeta-reducida-texto: #D14600;			
					--color-boton-enlace-nivel1-fondo: #f8e7de;
					--color-boton-enlace-nivel1-borde: 1px solid;
					--color-boton-enlace-nivel1-borde-color: #f8e7de;			
					--color-boton-enlace-nivel1-texto: #ffffff;
					--color-boton-enlace-nivel2-fondo: #FBF2E9;
					--color-boton-enlace-nivel2-borde: 1px solid;
					--color-boton-enlace-nivel2-borde-color: #C74200;			
					--color-boton-enlace-nivel2-texto: #C74200;
					--color-tooltip-texto-fondo: #f9f8dd;
					--color-tooltip-texto-texto: #990924;		
					--color-linea-separacion-borde: #D14600;		
					--color-ligero-fondo: #FBF2E9;					
		}
		/* --- 2.6. PÁGINA: EMPLEO PUBLICO --- */
		#pagina-empleo-publico, #pagina-empleo-publico-nivel2 {
					--color-cabecera-seccion-padre-fondo: #d31e88;
					--color-cabecera-seccion-padre-texto: #ffffff;			
					--color-cabecera-seccion-fondo: #f8dced;
					--color-cabecera-seccion-texto: #d31e88;			
					--color-tarjeta-fondo: #ffffff;
					--color-tarjeta-borde: #e0e0e0;
					--color-tarjeta-descripcion: #000000;
					--color-titulo-tarjeta-texto: #BB1B78;
					--color-icono-boton-texto: #d31e88;			
					--color-icono-tarjeta-reducida-texto: #d31e88;			
					--color-boton-enlace-nivel1-fondo: #d31e88;
					--color-boton-enlace-nivel1-borde: 1px solid;
					--color-boton-enlace-nivel1-borde-color: #d31e88;			
					--color-boton-enlace-nivel1-texto: #ffffff;
					--color-boton-enlace-nivel2-fondo: #F9E1F0;
					--color-boton-enlace-nivel2-borde: 1px solid;
					--color-boton-enlace-nivel2-borde-color: #BB1B78;			
					--color-boton-enlace-nivel2-texto: #BB1B78;
					--color-tooltip-texto-fondo: #f9f8dd;
					--color-tooltip-texto-texto: #990924;		
					--color-linea-separacion-borde: #d31e88;
					--color-ligero-fondo: #F9E1F0;										
		}
		/* --- 2.7. PÁGINA: DERECHO DE ACCESO A LA INFORMACIÓN --- */
		#pagina-acceso-informacion, #pagina-acceso-informacion-nivel2 {
			/* Variables de acceso-informacion-colores.css (Morado fuerte) */
			--color-cabecera-seccion-padre-fondo: #9404a7;
			--color-cabecera-seccion-padre-texto: #ffffff;
			--color-cabecera-seccion-fondo: #f3dcf6;
			--color-cabecera-seccion-texto: #9404a7;
			--color-tarjeta-fondo: #ffffff;
			--color-tarjeta-borde: #e0e0e0;
			--color-tarjeta-descripcion-texto: #000000;
			--color-titulo-tarjeta-texto: #9404a7;
			--color-icono-boton-texto: #9404a7;
			--color-icono-tarjeta-reducida-texto: #9404a7;
			--color-linea-separacion-borde: #9404a7;
			--color-boton-enlace-nivel1-fondo: #9404a7;
			--color-boton-enlace-nivel1-borde: 1px solid;
			--color-boton-enlace-nivel1-borde-color: #9404a7;
			--color-boton-enlace-nivel1-texto: #ffffff;
			--color-boton-enlace-nivel2-fondo: #f3dcf6;
			--color-boton-enlace-nivel2-borde: 1px solid;
			--color-boton-enlace-nivel2-borde-color: #9404a7;
			--color-boton-enlace-nivel2-texto: #9404a7;
			--color-tooltip-texto-fondo: #f9f8dd;
			--color-tooltip-texto-texto: #990924;			
			--color-ligero-fondo: #f3dcf6;										
		}

		/* --- 3. PÁGINA: CONOCE ESTE PORTAL (conoce-este-portal.html) --- */

		/* Esquemna de color AZUL (conoce-este-portal-colores-azul.css) */
		/* El HTML usará el ID #pagina-conoce-portal y la clase .color-azul */
		#pagina-conoce-portal.color-azul, #pagina-faq.color-azul, #pagina-canal-interno.color-azul {
			--color-cabecera-seccion-padre-fondo: #2c6a9d;
			--color-cabecera-seccion-padre-texto: #ffffff;
			--color-cabecera-seccion-fondo: #d9edf7;
			--color-cabecera-seccion-texto: #2c6a9d;
			--color-tarjeta-fondo: #ffffff;
			--color-tarjeta-borde: #d1c4e9;
			--color-tarjeta-descripcion-texto: #333333;
			--color-titulo-tarjeta-texto: #2c6a9d;
			--color-icono-boton-texto: #2c6a9d;
			--color-icono-tarjeta-reducida-texto: #2c6a9d;
			--color-linea-separacion-borde: #2c6a9d;
			--color-boton-enlace-nivel0-fondo: #2c6a9d;
			--color-boton-enlace-nivel0-borde: 1px solid;
			--color-boton-enlace-nivel0-borde-color: #d9edf7;
			--color-boton-enlace-nivel0-texto: #d9edf7;
			--color-boton-enlace-nivel1-fondo: #2c6a9d;
			--color-boton-enlace-nivel1-borde: 1px solid;
			--color-boton-enlace-nivel1-borde-color: #2c6a9d;
			--color-boton-enlace-nivel1-texto: #d9edf7;
			--color-boton-enlace-nivel2-fondo: #d9edf7;
			--color-boton-enlace-nivel2-borde: 1px solid;
			--color-boton-enlace-nivel2-borde-color: #2c6a9d;
			--color-boton-enlace-nivel2-texto: #2c6a9d;	
			--color-tooltip-texto-fondo: #f9f8dd;
			--color-tooltip-texto-texto: #990924;				
			--color-ligero-fondo: #e9f3f7;
		}

		/* Esquemna de color cereza (conoce-este-portal-colores-cereza.css) */
		/* Si el usuario quisiera cambiar el esquema, cambiaría la clase de main a .color-cereza */
		#pagina-conoce-portal.color-cereza, #pagina-faq.color-cereza, #pagina-canal-interno.color-cereza {
			--color-cabecera-seccion-padre-fondo: #981D56;
			--color-cabecera-seccion-padre-texto: #ffffff;
			--color-cabecera-seccion-fondo: #f3e5f5;
			--color-cabecera-seccion-texto: #981D56;
			--color-tarjeta-fondo: #ffffff;
			--color-tarjeta-borde: #981D56;
			--color-tarjeta-descripcion-texto: #333333;
			--color-titulo-tarjeta-texto: #981D56;
			--color-icono-boton-texto: #4a148c;
			--color-icono-tarjeta-reducida-texto: #4a148c;
			--color-linea-separacion-borde: #981D56;
			--color-boton-enlace-nivel0-fondo: #981D56;
			--color-boton-enlace-nivel0-borde: 1px solid;
			--color-boton-enlace-nivel0-borde-color: #981D56;
			--color-boton-enlace-nivel0-texto: #f3e5f5;
			--color-boton-enlace-nivel1-fondo: #981D56;
			--color-boton-enlace-nivel1-borde: 1px solid;
			--color-boton-enlace-nivel1-borde-color: #f3e5f5;
			--color-boton-enlace-nivel1-texto: #f3e5f5;
			--color-boton-enlace-nivel2-fondo: #f3e5f5;
			--color-boton-enlace-nivel2-borde: 1px solid;
			--color-boton-enlace-nivel2-borde-color: #f3e5f5;
			--color-boton-enlace-nivel2-texto: #981D56;	
			--color-tooltip-texto-fondo: #f9f8dd;
			--color-tooltip-texto-texto: #990924;				
			--color-ligero-fondo: #f3e5f5;										
			
		}




/* ========================================================================= */
/* 3. ESTILOS DEL MENÚ DE ACTIVIDAD    */
/* ========================================================================= */

.contenedor-menu-asistencia a:hover, .botones-flotantes-listado a:hover{
	text-decoration: none;
}

#contenedor-menu-actividad {
	width: 100%;
}
/* Altura estimada del encabezado de Google Forms (Título, icono, etc.) */
:root {
    --alto-encabezado-forms: 350px;
}

/* 1. Contenedor: Define la ventana visible */
.contenedor-formulario-valoracion {
    overflow: hidden; /* Oculta cualquier cosa que se salga de los límites del contenedor */
    /* Establece la altura visible. La altura total del iframe menos lo que recortamos. */
    height: calc(600px - var(--alto-encabezado-forms)); /* 600px es la altura actual del iframe */
    width: 100%;
}
/* 2. Iframe: Desplaza el contenido hacia arriba */
.contenedor-formulario-valoracion iframe {
    margin-top: calc(-1 * var(--alto-encabezado-forms)); /* -360px?  Mueve el iframe hacia arriba, ocultando el encabezado */
    width: 100%; /* Asegura que el iframe se adapte al ancho */
    height: 600px;  /* Mantemos la altura original del iframe para que el contenido de los campos se vea completo */
}
.menu-actividad-contenedor {
    margin: 40px auto;
	//width: 100%;
    max-width: 800px;
    border: 1px solid var(--color-linea-separacion-borde);
    border-radius: 8px;
    background-color: var(--color-fondo-blanco);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.menu-actividad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--color-cabecera-seccion-padre-fondo); 
    color: var(--color-cabecera-seccion-padre-texto);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
    user-select: none; /* Evita que se seleccione el texto */
}

.menu-actividad-header:hover {
    background-color: var(--color-cabecera-seccion-fondo); /* Ligeramente diferente al hacer hover */
	color: var(--color-cabecera-seccion-texto);
	
}

.menu-actividad-titulo {
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.menu-actividad-titulo i {
    margin-right: 10px;
    font-size: 1.4rem;
}

/* Flecha de rotación */
.menu-actividad-flecha {
    transition: transform 0.3s ease;
    font-size: 1.4rem;
}

/* Ocultar contenido por defecto y manejar transición */
.menu-actividad-contenido {
    display: none;
    padding: 20px;
    border-top: 1px solid var(--color-base-tema-azul-oscuro);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
	width:600px;
}

/* Estilos de las subsecciones */
.menu-actividad-seccion {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--color-linea-separacion-borde);
}
.menu-actividad-seccion:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.menu-actividad-seccion h4 {
    color: var(--color-base-tema-azul-oscuro);
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}
.menu-actividad-seccion h4 i {
    margin-right: 8px;
    font-size: 1.2rem;
}

/* Estilos de los botones de feedback */
/*
.opciones-feedback {
    display: flex;
	flex-direction: column;
    gap: 15px;
}
.opciones-feedback .boton-enlace-nivel3 {
    text-align: center;
    flex-grow: 1;
    padding: 8px 15px;
}
*/
/* --- Activas (Toggle) --- */

.menu-actividad-contenedor .activo .menu-actividad-contenido {
    display: block; 
    opacity: 1;
    max-height: 600px; 
}


.menu-actividad-contenedor .activo .menu-actividad-flecha {
    transform: rotate(180deg); /* Flecha hacia arriba */
}

.contenedor-formulario-valoracion {
    margin: 20px 0; /* Asegura que el contenedor respete los márgenes del contenido principal */
}

.contenedor-formulario-valoracion iframe {
    max-width: 100%; /* Se adapta al 100% del ancho del contenedor */
    display: block;
}

/*.elementos-menu-accion,*/ .elementos-menu-saber-mas{
	display:flex;
	flex-direction: row;
}

/* Estilos para asegurar que los botones ocupen el 100% y se vean bien en la lista */
.elementos-con-botones {
    //padding: 0;
    gap: 20px;
    list-style: none; /* Quita los puntos/viñetas de la lista */
}

.elementos-con-botones .boton-contenedor-accion {
 //   margin-bottom: 8px; /* Espacio entre los botones */
}

/* Aseguramos que el botón ocupe todo el ancho del contenedor */
/*
.elementos-con-botones .boton-enlace-nivel2 {
    width: 100%;
    display: block;
    text-align: left; 
}
*/

.contenedor-saber-mas{
			display: grid; /* Habilitamos Grid para pantallas grandes; luego se transforma a flex para que se centren elementos y se adapten*/
			grid-template-columns: repeat(3, 1fr);				
			list-style:none;
			justify-content: center; /* Centramos el grupo de botones horizontalmente */
			gap: 10px;
			padding: 10px 0;
			//width: 400px;
			font-size: 0.8rem !important;
}
.contenedor-menu-asistencia{
			display: grid; /* Habilitamos Grid para pantallas grandes; luego se transforma a flex para que se centren elementos y se adapten*/
			grid-template-columns: repeat(5, 1fr);				
			list-style:none;
			justify-content: center; /* Centramos el grupo de botones horizontalmente */
			gap: 10px;
			padding: 15px;
			background: var(--color-base-tema-azul-claro);
}

/* ========================================================================= */
/* ESTILOS PARA LA PESTAÑA DEL MENÚ DE ASISTENCIA                            */
/* ========================================================================= */

/* 1. Estilos del cuerpo principal del menú */
.contenedor-cuerpo-asistencia {
    background-color: var(--color-boton-enlace-nivel2-fondo);
    //border: 1px solid var(--color-borde-gris, #ccc);
    border-radius: 8px; /* Borde redondeado */
    padding: 0; /* Quitamos el padding global para controlar el espaciado dentro */
    position: relative; /* Necesario para posicionar el título si fuera necesario */
    margin-top: 25px; /* Deja espacio para que la "pestaña" del título sobresalga */
}

/* 2. Estilos del título (la "pestaña") */
.titulo-pestaña-asistencia {
    
    background-color: var(--color-base-tema-azul-claro); /* Color de fondo de la PESTAÑA: Debe coincidir con el fondo del cuerpo */
    border-radius: 8px 8px 0 0; /* Redondeado solo arriba */
    padding: 10px 15px; /* Espaciado dentro del título */
    margin: 0; /* Quita el margen por defecto del h4 */
    position: absolute;
    top: -30px; /* Levantamos para que "sobresalga" por encima del contenedor */
    left: -1px; /* Ajuste para que no se vea la línea de borde izquierdo del cuerpo */
    //right: -1px; /* Ajuste para que no se vea la línea de borde derecho del cuerpo */
    width: fit-content; /* Se ajusta automáticamente */
	white-space: nowrap; /*Eviata que el titulo se divida si no hay suficiente espacio*/   
    border: 1px solid var(--color-base-tema-azul-claro);
    border-bottom: none; /* Elimina el borde inferior para que se fusione con el cuerpo */
    font-size: 1.1rem;
    color: var(--color-base-tema-azul-oscuro);
}

/* 3. Estilos del contenido (la lista) */
.contenedor-cuerpo-asistencia .contenedor-menu-asistencia {
    padding: 15px; /* Añade espaciado a la lista de elementos */
    margin-top: 0; /* Aseguramos que no haya margen superior entre la pestaña y la lista */
}

.contenedor-cuerpo-asistencia,
.titulo-pestaña-asistencia,
.contenedor-menu-asistencia li,
.contenedor-menu-asistencia .boton-destacado {
    /* Aseguramos que el padding y el borde se incluyan en el ancho y alto del elemento */
    box-sizing: border-box;
	font-size: 0.95rem;
}

/* ========================================================================= */
/* Estilos para botones de acción: Icono sobre el texto                      */
/* ========================================================================= */
/*
.elementos-menu-accion {
     display: flex; 
       flex-wrap: wrap; 
       gap: 10px; 
}*/
/* Estilo para mostrar los botones de Utiliza esta información horizontalmente */
.elementos-menu-accion {
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    margin: 0;
    display: flex;  /* flexbox para alinear los botones en una fila */
    flex-direction: row; 
    gap: 10px; /* Espacio entre los botones */
    justify-content: space-between; /* Distribuye el espacio entre ellos */
    flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea si no caben */
}

/* Ajuste para el contenedor de cada botón */
.elementos-menu-accion .boton-contenedor-accion {
    flex: 1 1 30%; /* Permite que el elemento crezca/encoga y ocupa al menos un 30% del ancho */
    min-width: 80px; /* Ancho mínimo para que no se compriman demasiado */
}

.boton-accion-vertical {
    display: flex; /*Activamos Flexbox para los elementos internos */
    flex-direction: column; /* Colocamos los elementos en una columna (vertical) */
    align-items: center; /* Centramos el icono y el texto horizontalmente */
    text-align: center; /* Ajustes visuales para el botón */
    padding: 10px; 
    //border: 1px solid var(--color-titulo-tarjeta-texto);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-titulo-tarjeta-texto);
}

.boton-accion-vertical .icono-tarjeta {
    margin-bottom: 5px; /* Margen para separar el icono del texto de abajo */
    font-size: 1.5rem; /* Ajustamos el tamaño del icono */
}

.boton-accion-vertical .texto-accion {
    display: block; /* Aseguramos que el texto no se ajuste en línea */
    font-size: 0.8rem; /* Tamaño más pequeño para el texto de la acción */
    line-height: 1.2;
}

/* ========================================================================= */
/* NUEVO MENÚ DE ACTIVIDAD FLOTANTE (Quick Actions)                          */
/* ========================================================================= */

#contenedor-menu-actividad-flotante {
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 1000; 
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}
#menu-actividad-flotante {
    
    position: fixed; /* Mantiene el menú visible aunque el usuario haga scroll */
    top: 140px;     /* Posiciona el menú cerca del borde superior */
    right: 10px; /* Posiciona el menú cerca del borde derecho */
    z-index: 1050; /* Asegura que el menú esté siempre por encima de otros elementos */
    background-color: var(--color-base-ligero); 
	color: var(--color-base-tema-azul-oscuro);
	border: 2px solid var(--color-base-tema-azul-oscuro);
}
/*AÑADIMOS MEDIA QUERIES PARA PONER EN POSICIÓN EL MENÚ EN DISTINTOS LUGARES EN BASE A LA PANTALLA DEL USUARIO*/
@media (min-width:320px) and (max-width:768px){
	#menu-actividad-flotante {top: 10px;}
	}
	
@media (min-width:1024px) and (max-width:1440px){
	#menu-actividad-flotante {top: 180px;}
	}

.boton-accion-flotante {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px; 
    height: 36px;
    background-color: var(--color-fondo-tarjeta-gris, #eee); 
    color: var(--color-base-tema-azul-oscuro);
    border-radius: 50%; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    font-size: 1.2rem;
    transition: background-color 0.2s;
}

.boton-accion-flotante:hover {
    background-color: var(--color-secundario-hover, #ccc); 
    transform: scale(1.05);
}

/* Estilo para el botón 'Valora y +' */
.boton-destacado-flotante {
    background-color: var(--color-principal, #007bff); 
    color: white;
}

.boton-destacado-flotante:hover {
    background-color: var(--color-base-tema-azul-oscuro);
}

.botones-flotantes-listado {
	list-style: none;
	padding:10px;
	display: flex;
	//flex-direction: row;
	gap: 10px;
	margin: 0 auto;
}
/* ========================================================================= */
/* Estilos para el Formulario de Valoración Fijo (Inferior)         */
/* ========================================================================= */
.contenedor-valoracion-fija {
    display: none; /* Por defecto oculto */
    position: fixed; /* Posición Fija y centrado en la parte inferior */
    bottom: 0;
    left: 50%; /* Inicia en el centro */
    transform: translateX(-50%); /* Lo mueve hacia la izquierda la mitad de su ancho */
    width: 90%; /* Ancho responsivo */
    max-width: 600px; /* Ancho máximo para pantallas grandes */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    background-color: var(--color-base-tema-azul-claro); /* Usa color de fondo principal */
    border: 1px solid var(--color-base-tema-azul-claro);
    border-bottom: none; /* Quitamos el borde inferior */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 15px;
}

.contenedor-valoracion-fija.visible {
    display: block; /* Muestra el contenedor cuando la clase 'visible' se añade con JS */
}

.contenido-valoracion-fija h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-titulo-tarjeta-texto); /* O el color que usemos para títulos */
}

.contenedor-valoracion-fija .boton-cerrar-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-base-tema-azul-oscuro); /* Color de la 'X' */
}

.contenedor-formulario-valoracion {
    width: 100%;
}

/* Ajuste del iFrame para que use el 100% del contenedor */
.contenedor-formulario-valoracion iframe {
    display: block;
    width: 100%;
    //height: 600px; /* Reducido para mejor visualización en la parte inferior */
}

/* Media Query para móvil */
/*@media (max-width: 650px) {
    .contenedor-valoracion-fija {
        width: 100%;
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }*/



/* ========================================================================= */
/* 3. MEDIA QUERIES (Adaptabilidad - Movidas al final para mejor cascada)    */
/* ========================================================================= */
	   
        /* Media Queries para la adaptabilidad */
        @media (max-width: 1200px) {
			/*.tarjeta-fila .seccion-izquierda {
				min-width: 130px;
			}	*/	
            .tarjeta-fila .seccion-derecha {
                flex-direction: column;
            //    align-items: flex-start;
                gap: 10px;
            }
			
            .tarjeta-fila .descripcion {
                text-align: center;
			    flex-basis: auto;
            }
			
            .tarjeta-fila .boton-enlace-nivel2, .caja-consejo .boton-enlace-nivel2 {
                width: 50%;
                margin-left: 0;
            }
			
            .tarjeta-fila .icono-tarjeta-reducida {
                margin-right: 5px; /* Restaura el margen entre el ícono y el título */
                margin-bottom: 0; /* Elimina el margen inferior innecesario */
				//font-size:25px;
				font-size: 1.8rem;
            }

            .tarjeta-fila .titulo-tarjeta {
                text-align: center
				//font-size: 14px;
				font-size:1rem;
            }
			 .tarjeta-columna .boton-enlace-nivel1 {
                width: 70%;
                margin: 0 auto;            
			}

			/* CAMBIAMOS EL MODELO A FLEXBOX PARA CENTRAR FILAS INCOMPLETAS */
			.contenedor-destacados {
				display: flex; 
				flex-wrap: wrap; /* Permite que los elementos se envuelvan en la siguiente línea */
				justify-content: center; /* CLAVE: Centra el contenido de cada línea (incluida la última) */
				gap: 20px; /* Nuevo gap para este tamaño */
				/* Importante: Añadir un ancho máximo si es necesario para evitar que se estire demasiado */
			}
			
			/* Definimos el ancho de cada artículo para que quepan 3 por fila */
			.contenedor-destacados > a {
				/*
				 * Fórmula: 100% / 3 columnas = 33.333%
				 * Restamos el gap para que el navegador tenga espacio entre ellos:
				 * 20px de gap * 2 (espacios entre 3 elementos) / 3 columnas
				 * Usamos un valor fijo aproximado o la función calc()
				*/
				width: calc(33.333% - 14px); /* Ajuste basado en el gap de 20px */
				/* Aseguramos que los estilos de Grid del elemento se reseteen (si los hubiera) */
				grid-column: auto;
			}			
			
					.modulo-acceso-tarjeta .boton-destacado{
				margin: 20px auto 0 auto;
				width: 40%;
			}
			 .tooltip-contenedor {
				 justify-content: center;
			 }
			.menu-actividad-contenido {
				width:500px;
			}			 
        }

		@media (max-width: 1024px) {
			/* De 3 columnas a 2 */
			.contenedor-seccion-principal {
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}
			/*.contenedor-principal-nivel-columnas {
				flex-direction: column;
				gap: 15px;
			}*/
            .tarjeta-fila .seccion-derecha {
                flex-direction: column;
            //    align-items: flex-start;
                gap: 10px;
            }
			
            .tarjeta-fila .descripcion {
                text-align: center;
			    flex-basis: auto;
            }
			
            /*.tarjeta-fila .boton-enlace-nivel2, .caja-consejo .boton-enlace-nivel2 {
                width: 50%;
                margin-left: 0;
            }*/
			
            .tarjeta-fila .icono-tarjeta-reducida {
                margin-right: 5px; /* Restaura el margen entre el ícono y el título */
                margin-bottom: 0; /* Elimina el margen inferior innecesario */
				//font-size:25px;
				font-size: 1.8rem;
            }

            .tarjeta-fila .titulo-tarjeta {
                text-align: center
				//font-size: 14px;
				font-size:1rem;
            }			
			/* .tarjeta-columna .boton-enlace-nivel1,*/ .tarjeta-fila .boton-enlace-nivel2, .caja-consejo .boton-enlace-nivel2 {
                width: 60%;
                margin-left: 0;
            }
			.tarjeta-columna .boton-enlace-nivel1 {
                width: 60%;
                margin: 0 auto;
            }
			
			#contenidos-organizados .boton-destacado-seccion{
				width: 80%;
				font-size:1.4rem;
			}	
			#seccion-estructura-conoce-portal .boton-destacado-seccion{
				width: 80%;
				font-size:1.4rem;
				margin: 0 auto; 		
			}	
			#pagina-conoce-portal .tooltip-texto {
				left: 65%; /* Lo mueve completamente fuera del elemento ancla hacia la derecha */
				bottom: -50%;  
				top: 0%;  /*Alinea verticalmente al centro de su elemento ancla */
				margin-left: 10px; 
			}			
			.modulo-acceso-tarjeta .boton-destacado{
				margin: 20px auto 0 auto;
				width: 40%;
			}
			.contenedor-destacados > article, .contenedor-menu-asistencia > article {
						 /* 100% / 2 columnas - gap. Centra 2 en la primera fila y 1 en la segunda. */
						width: calc(50% - 10px); 
			}

			/* CAMBIAMOS EL MODELO A FLEXBOX PARA CENTRAR FILAS INCOMPLETAS */
			.contenedor-destacados, .contenedor-menu-asistencia {
				display: flex; 
				flex-wrap: wrap; /* Permite que los elementos se envuelvan en la siguiente línea */
				justify-content: center; /* CLAVE: Centra el contenido de cada línea (incluida la última) */
				gap: 20px; /* Nuevo gap para este tamaño */
				/* Importante: Añadir un ancho máximo si es necesario para evitar que se estire demasiado */
			}
			
			/* Definimos el ancho de cada artículo para que quepan 3 por fila */
			.contenedor-destacados > a, .contenedor-menu-asistencia > a {
				/*
				 * Fórmula: 100% / 3 columnas = 33.333%
				 * Restamos el gap para que el navegador tenga espacio entre ellos:
				 * 20px de gap * 2 (espacios entre 3 elementos) / 3 columnas
				 * Usamos un valor fijo aproximado o la función calc()
				*/
				width: calc(33.333% - 14px); /* Ajuste basado en el gap de 20px */
				/* Aseguramos que los estilos de Grid del elemento se reseteen (si los hubiera) */
				grid-column: auto;
			}
			
		}
		
		@media (max-width: 768px) {
			/* De 2 columnas a 1 */
			.contenedor-seccion-principal {
				grid-template-columns: 1fr;
				gap: 15px;
			}
			.contenedor-seccion-principal > article:last-of-type:nth-child(4), .contenedor-seccion-principal > article:last-of-type:nth-child(7) {
				grid-column: 1 / span 1; /* Centra el cuarto y séptimo elemento en la fila */
			}
			.cabecera-seccion-padre {
				//font-size: 18px;
				font-size:1.286rem;
				padding: 15px;
			}
			.seccion-columna .cabecera-seccion-padre {
				//font-size: 16px;
				font-size:1.143;
			}
	
			/* El botón destacado se vuelve ancho completo */
			/*.boton-destacado-seccion {
				width: 80%;
				margin-bottom: 20px;
			}*/
	/*		.contenedor-destacados {
				//flex-direction: column;
				grid-template-columns: repeat(2, 1fr);
			}*/
			/* Definimos el ancho de cada artículo para que quepan 3 por fila */
			.contenedor-destacados > a {
				/*
				 * Fórmula: 100% / 3 columnas = 33.333%
				 * Restamos el gap para que el navegador tenga espacio entre ellos:
				 * 20px de gap * 2 (espacios entre 3 elementos) / 3 columnas
				 * Usamos un valor fijo aproximado o la función calc()
				*/
				width: calc(50% - 14px); /* Ajuste basado en el gap de 20px */
				/* Aseguramos que los estilos de Grid del elemento se reseteen (si los hubiera) */
				grid-column: auto;
			}			
			/* Aquí también usamos Flexbox con width: 100% */
			.contenedor-destacados, .contenedor-menu-asistencia {
				gap: 15px;
				font-size:0.9rem;
			}
			.contenedor-destacados > a {
				width: 100%; 
			}					
		/*	.contenedor-menu-asistencia{
			display: grid;
			grid-template-columns: repeat(2, 1fr);		
			}*/
			/*.boton-destacado {
				width: 80%;
				justify-content: center;
				margin-bottom: 5px;
			}*/

			/*Adaptación del buscador*/
			.grupo-input-buscador {
				flex-direction: column; /* Apila input y botón en pantallas pequeñas */
				gap: 15px;
			}
			.input-buscador,
			.boton-buscador {
				width: 100%; /* Ocupa todo el ancho */
			}
			.label-buscador {
				font-size: 1rem;
			}
			/*Adaptación del contenedor a nivel columnas para que cambie a disposición columna en dispositivos de menor tamaño*/	
            .contenedor-principal-nivel-columnas {
                flex-direction: column;
                gap: 20px;
            }
            .seccion-columna {
                flex-basis: auto;
                max-width: 100%;
            }
            .seccion-columna > section {
                flex-grow: 0;
            }
			 /*.tarjeta-columna .boton-enlace-nivel1,*/ .tarjeta-fila .boton-enlace-nivel2, .caja-consejo .boton-enlace-nivel2 {
                width: 60%;
                margin-left: 0;
            }
			.tarjeta-columna .boton-enlace-nivel1 {
                width: 60%;
                margin: 0 auto;
            }			
			/*Adaptación de tarjetas tipo fila */
            .tarjeta-fila {
                flex-direction: column;
                //align-items: flex-start;
				align-items: center;
                text-align: center;
            }
            .tarjeta-fila .titulo-tarjeta {
                text-align: center;
				//font-size: 14px;
				font-size:1rem;
            }            
            .tarjeta-fila .seccion-izquierda {
                flex-direction: row; /* Vuelve a la dirección horizontal */
                width: 100%;
                justify-content: center; /* Centra el contenido horizontalmente */
                align-items: center; /* Alinea los ítems en el centro del eje vertical */
                margin-bottom: 10px;
            }
            .tarjeta-fila .icono-tarjeta-reducida {
                margin-right: 5px; /* Restaura el margen entre el ícono y el título */
                margin-bottom: 0; /* Elimina el margen inferior innecesario */
				font-size:25px;
				font-size:1.786rem;
            }
            .tarjeta-fila .seccion-derecha {
                flex-direction: column;
                align-items: center; 
                width: 100%;
                margin-top: 10px;
                text-align: center;
                gap: 15px; 
            }
            /*
            .tarjeta-fila .descripcion {
                text-align: center;
                margin-bottom: 0;
                flex-basis: auto;
            }*/

            .tarjeta-fila .boton-enlace-nivel2, .caja-consejo .boton-enlace-nivel2 {
                width: 40%;
                margin-left: 0;
            }
            
            /* En pantallas pequeñas, oculta la flecha y muestra la línea de separación */
            .tarjeta-fila .icono-flecha {
                display: none;
            }
            
            .tarjeta-fila .linea-separacion {
                display: block;
				width: calc(100% - 10px);
				height: 0;
				margin: 10px 0;
				border-width: 2px;
				border-style: solid;
            }
			/* Adaptabilidad para recurso tipo modulo-acceso-tarjeta*/
			.modulo-acceso-tarjeta {
				grid-column: span 1; /* Vuelve a 1 columna */
			}
			.modulo-acceso-tarjeta .contenido-tarjeta {
				flex-direction: column;
				align-items: center;
				text-align: center;
			}
			.modulo-acceso-tarjeta .icono-y-titulo {
				flex-direction: column;
				margin-bottom: 15px;
			}
			.modulo-acceso-tarjeta .icono-tarjeta {
				margin-right: 0;
				margin-bottom: 10px;
			}
			.modulo-acceso-tarjeta .descripcion {
				margin-bottom: 15px;
			}
			.modulo-acceso-tarjeta .accesibilidad-recursos {
				width: 100%;
				padding-left: 0;
				border-left: none;
				border-top: 1px solid var(--color-linea-separacion-borde);
				padding-top: 15px;
				margin-left: 0;
			}
			.modulo-acceso-tarjeta .boton-destacado{
				margin: 20px auto 0 auto;
				width: 40%;
				font-size: 0.9rem;
			}	
			/* Adaptabilidad para el Chat AI */
			.chat-ia-contenedor {
				padding: 10px;
				margin-bottom: 20px;
			}
			.tarjeta-chat {
				padding: 20px;
				max-width: 100%;
			}
			.icono-tarjeta-chat {
			//	font-size: 30px;
				
			}
			.tarjeta-chat .titulo-tarjeta {
			//	font-size: 18px;
			}
			.linea-separacion-chat {
				width: 90%;
				margin: 10px 0 15px 0;
			}
			.descripcion-chat {
			//	font-size: 15px;
				margin-bottom: 20px;
			}
			.boton-chat {
				width: 100%;
				max-width: 250px;
				padding: 10px 20px;
			}			
			/*Adaptabilidad para las preguntas frecuentes con acordeon */
			.faq-pregunta {
			//	font-size: 1rem;
				padding: 15px 20px;
			}
			.faq-respuesta {
				padding: 0 20px 20px 20px;
			}	
		}			
/* Archivo: estilos-unificados.css */

@media (max-width: 768px) {
    
    /* ------------------------------------------- */
    /* 1. Menú de Asistencia (Asegura ancho y posición) */
    /* ------------------------------------------- */
    
    #contenedor-menu-asistencia {
        width: 100% !important; /* Si se usa un width fijo en escritorio */
        max-width: none !important; /* Si se usa un max-width fijo en escritorio */
        margin: 20px 0; /* Asegura un margen adecuado en móvil */
        /* Si era fixed, se puede cambiar a static o inherit si debe ir con el scroll */
        /* position: static !important; */ 
    }

    /* 2. Cuerpo del Contenedor (para la pestaña) */
    .contenedor-cuerpo-asistencia {
        /* Reducir ligeramente el margen superior para que la pestaña sobresalga menos */
        margin-top: 18px; 
        /* Usar un padding más compacto, ya que el espacio es limitado */
        padding: 0; 
        border-radius: 6px;
    }

    /* 3. La Pestaña (Título) */
    .titulo-pestaña-asistencia {
        top: -40px; /* Ajustar la posición vertical para el nuevo margen-top */
        padding: 10px 15px; /* Espaciado más compacto */
        font-size: 1rem; /* Opcional: reducir el tamaño de la fuente */
		/* Aseguramos que la pestaña se extienda correctamente en el ancho del contenedor padre */        
        left: -1px;
        //right: -1px;
        width: auto;
        border-radius: 6px 6px 0 0;
    }

    /* 4. Contenido de la Lista */
    .contenedor-cuerpo-asistencia .contenedor-menu-asistencia {
        padding: 10px 15px 15px 15px; /* Espaciado interno de la lista */
    }

    /* 5. Asegurar que los botones ocupen el 100% */
    .contenedor-menu-asistencia .boton-destacado {
        //display: block;
        width: 100%;
        box-sizing: border-box; /* Fundamental para incluir padding y borde en el width */
        margin-bottom: 8px; /* Pequeño margen entre botones/enlaces */
        text-align: left; /* Opcional: alinear el texto de los botones a la izquierda */
		font-size:0.9rem;
    }
			.menu-actividad-contenido {
				width:400px;
			}			 
	
}
/* ========================================================= */
/* Media Query para Dispositivos Móviles (Menú de Actividad) */
/* ========================================================= */
@media screen and (max-width: 600px) {

    /* Disposición Vertical o más compacta de los botones */
    .botones-flotantes-listado {
        gap: 5px; /* Espacio mínimo entre ellos */
        padding: 5px; /* Reduce el padding del listado */
    }

    /* Estilos del Botón de Acción Flotante */
    .boton-accion-flotante {
        width: 30px; /* Reducir el ancho y alto del botón (círculo más pequeño) */
        height: 30px;
        font-size: 1.1rem; /* Reduce el tamaño del ícono */
    }
    
    /* Reduce el tamaño del "botón flotante" de valoración para que encaje */
    .boton-destacado-flotante {
        /* Mantenerlo distintivo, pero compacto */
        width: 35px;
        height: 35px;
    }
    
    /* Ocultar el icono animado que acompaña al botón de valoración, si molesta */
    .boton-destacado-flotante + .icono-animado {
        display: none;
    }
}
        @media (max-width: 480px) {
            .contenedor-seccion-principal {
                grid-template-columns: 1fr;
                gap: 20px;
            }
			.contenedor-seccion-principal > article:last-of-type:nth-child(4), .contenedor-seccion-principal > article:last-of-type:nth-child(7) {
				grid-column: 1 / span 1; /* Centra el cuarto y séptimo elemento en la fila */
			}			
            .tarjeta-columna {
                padding: 15px;
            }

			 /*.tarjeta-columna .boton-enlace-nivel1,*/ .tarjeta-fila .boton-enlace-nivel2 {
                width: 60%;
                margin-left: 0;
            }
			.tarjeta-columna .boton-enlace-nivel1 {
               // width: 60%;
                margin: 0 auto;
            }
			
			#contenidos-organizados.boton-destacado-seccion{
				width:100%;
				font-size:1.2rem;
			}
			.contenedor-destacados {
				grid-template-columns: 1fr;
				}
			.modulo-acceso-tarjeta .boton-destacado{
				margin: 20px auto 0 auto;
				width: 40%;
			}
			.contenedor-menu-asistencia{
			display: grid;
			grid-template-columns: repeat(1, 1fr);		
			}			
        }