/* =========================================
   1. VARIABLES Y CONFIGURACIÓN DE COLORES
   ========================================= */
:root {
	/* Colores Institucionales INTI */
	--primary: #0072bb;      /* Azul principal */
	--primary-dark: #005a9c; /* Azul oscuro (hover) */
	--secondary: #333333;    /* Texto general */
	--accent: #fdb913;       /* Amarillo Institucional */
	--separator-gold: #e7ba61; /* Dorado suave para separadores principales */

	/* Colores Gobierno Nacional (Identidad) */
	--gov-blue: #232d4f;     /* Azul oscuro para headers/footers */
	--gov-accent: #e7ba61;   /* Dorado/Ocre para detalles */
	
	/* Colores Base y Utilidades */
	--header-bg: #2e3d49; 
	--light-bg: #f4f6f8;     /* Fondo general suave */
	--ivory-bg: #f7f5ea;     /* Fondo sección contacto */
	--white: #ffffff;
	--shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra estándar */
	--border: #e1e4e8;
	--light-blue-bg: #f0f7ff; /* NUEVO: Fondo azul muy suave para destacar */
}

/* ==============================
   2. RESET Y ESTILOS BASE
   ============================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
	overflow-y: auto;           /* [V52] Era scroll (scrollbar forzado de 15px recortaba contenido en mobile) */
	scrollbar-gutter: stable;   /* [V52] Reserva el espacio del scrollbar sin mostrarlo siempre (evita layout shift al abrir modales) */
}

body {
	font-family: 'Roboto', sans-serif;
	color: var(--secondary);
	background-color: var(--light-bg);
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden; /* [V52] Impide scroll horizontal sin afectar elementos fixed */
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

body.listo {
    opacity: 1;
}

/* BLOQUEO TOTAL PARA QUE EL FONDO NO SE MUEVA AL ABRIR MODALES */
.modal-open, .modal-open body {
	overflow: hidden !important;
}

ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: inherit; transition: 0.2s; }

/* ==============================
   SCROLLBAR PRINCIPAL DE LA WEB
   ============================== */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--primary) #f4f6f8;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: var(--light-bg);
}

::-webkit-scrollbar-thumb {
	background-color: var(--primary);
	border-radius: 10px;
	border: 3px solid var(--light-bg);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--primary-dark);
}


/* =========================================
   3. CLASES DE UTILIDAD Y BOTONES
   ========================================= */
.container { max-width: 1420px; margin: 0 auto; padding: 0 20px; }
.hidden { display: none !important; }
.text-primary { color: var(--primary); }

.btn { display: inline-block; padding: 10px 20px; border-radius: 4px; font-weight: 600; cursor: pointer; border: none; text-align: center; font-size: 0.9rem; transition: 0.3s; }

.btn-primary { background-color: var(--primary); color: white; border: 2px solid transparent; }
.btn-primary:hover { background-color: var(--primary-dark); box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-color: transparent; }

.btn-outline { border: 2px solid var(--primary); color: var(--primary); background: transparent; }

.card:hover { 
	transform: translateY(-5px); 
	border-top-color: var(--gov-accent); 
	box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
	background-color: #fdfcf8 !important;
}

.card .btn-outline,
.card .btn {
	width: 145px;
	height: 40px;
	line-height: 18px;
	text-align: center; 
}
.news-item h4,
.news-item p {
	text-align: left;
}

/* =========================================
   4. HEADER Y NAVEGACIÓN
   ========================================= */
.gov-bar { 
	background-color: var(--gov-blue); 
	color: #e0e0e0; 
	padding: 5px 0; 
	font-size: 0.8rem; 
	border-bottom: 4px solid var(--gov-accent);
}

.gov-bar .container {
	text-align: right;
}

header { background: var(--white); box-shadow: none; position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.header-actions { display: flex; align-items: center; gap: 15px; }

.logo { display: flex; align-items: center; gap: 15px; font-size: 1.5rem; font-weight: 700; color: var(--primary); cursor: pointer; }
.logo i { font-size: 1.8rem; color: var(--accent); }
.logo span { border-left: 1px solid #ccc; padding-left: 15px; color: var(--secondary); font-family: 'Lora', serif; font-weight: 300; font-size: 1.3rem; }
.logo img {
    height: 55px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.nav-menu { display: flex; gap: 5px; }
.nav-link { padding: 10px 15px; color: var(--secondary); font-weight: 500; border-radius: 4px; cursor: pointer; }
.nav-link:hover, .nav-link.active { color: var(--primary); background-color: rgba(0, 114, 187, 0.05); }
.mobile-toggle { 
	display: none; 
	font-size: 1.5rem; 
	cursor: pointer; 
	margin-left: auto; 
	padding-right: 15px; 
}

/* =========================================
   5. ESTRUCTURA DE PÁGINA Y SEPARADORES
   ========================================= */
.black-separator {
	width: 100%;
	height: 5px; 
	background-color: var(--separator-gold); 
	border: none;
	z-index: 999; 
}

.top-separator { position: sticky; top: 80px; }
.bottom-separator { background-color: var(--separator-gold); margin-top: auto; }

#main-content-wrapper { flex-grow: 1; display: flex; flex-direction: column; }

.page-section { animation: fadeInSection 0.4s ease-in-out; padding-bottom: 60px; }
#home.page-section { padding-bottom: 0; } 

@keyframes fadeInSection { 
	from { opacity: 0; } 
	to { opacity: 1; } 
}

@keyframes slideUpText {
	from { opacity: 0; transform: translateY(15px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpSolid {
	from { transform: translateY(15px); }
	to { transform: translateY(0); }
}
/* =========================================
   6. SECCIÓN HOME (Hero, Cards, Info)
   ========================================= */
.hero {
	background: linear-gradient(135deg, rgba(0, 114, 187, 0.9), rgba(46, 61, 73, 0.9)), 
				url('../imagenes/biblio3.avif');
	background-size: cover;
	background-position: center;
	padding: 40px 0 45px 0;
	text-align: center;
	color: white;
}

.hero h1 {
	font-family: 'Lora', serif;
	font-size: 2.8rem;
	margin-bottom: 10px;
	font-weight: 700;
	color: white;
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
	text-shadow: 
		0 2px 4px rgba(0, 0, 0, 0.3),
		0 4px 8px rgba(0, 0, 0, 0.15);
}

.hero-subtitle {
	font-size: 1.2rem;
	font-weight: 300;
	color: #e0e0e0;
	letter-spacing: 0.5px;
	margin-top: 5px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.hero h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0%;
	height: 3px;
	background: var(--accent);
	border-radius: 2px;
	transform: translateX(-50%);
	animation: expand-line 1.2s ease-out 0.5s forwards;
}

@keyframes expand-line {
	0% { width: 0%; }
	100% { width: 92%; }
}

.hero p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 30px; opacity: 0.9; }

.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: -25px; 
	position: relative; 
	z-index: 10;
	justify-content: center; 
}

.card {
	background: white; 
	padding: 20px 20px; 
	border-radius: 8px; box-shadow: var(--shadow);
	border-top: 4px solid transparent; transition: 0.3s; display: flex; flex-direction: column; align-items: center; text-align: center;
}

.card-icon {
	font-size: 2rem; 
	color: var(--primary); 
	margin-bottom: 15px;
	width: 60px; height: 60px; border-radius: 50%; display: flex; 
	align-items: center; justify-content: center;
}
.card-icon.card-1 { background: #e0f7fa; } 
.card-icon.card-2 { background: #e8f5e9; } 
.card-icon.card-3 { background: #ffecb3; } 
.card-icon.card-4 { background: #f3e8ff; }
.card-icon.card-5 { background: #e0f2f1; }
.card-icon.card-6 { background: #e0e7ff; } /* [V54] Inteligencia Bibliográfica */

.card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.card p { font-size: 0.95rem; color: #666; margin-bottom: 20px; flex-grow: 1; }

.home-news-card {
	background: white; padding: 25px; border-radius: 6px;
	border-left: 4px solid var(--primary); 
	box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; gap: 20px; align-items: center;
}

.recursos-nacionales-bottom-separator {
	width: min(100%, 690px);
	height: 1px;
	margin: 0 auto 54px;
	background: #e1e5e9;
}

.ivory-section {
	background-color: var(--ivory-bg);
	border-top: 1px solid #efeadd;
	padding: 30px 0 30px 0; 
	margin-top: 60px;
	width: 100%;
	flex-grow: 1;
}
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; }
.info-block h3 { color: var(--primary); border-left: 4px solid var(--accent); padding-left: 15px; margin-bottom: 20px; font-family: 'Lora', serif; }

.horarios-desc { margin-bottom: 20px; }
.horarios-box { background: white; padding: 15px 25px; border-radius: 6px; border: 1px solid #e0e0e0; width: fit-content; }

.recursos-nacionales-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; width: 100%; margin-bottom: 46px; padding: 0 20px; }
.recurso-nacional-link { display: flex; align-items: center; gap: 15px; background: #ffffff; padding: 15px 25px; border-radius: 10px; border: 1px solid #e1e5e9; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-decoration: none; transition: all 0.3s ease; flex: 1 1 350px; max-width: 450px; }
.recurso-nacional-link .recurso-icon { font-size: 1.4rem; flex-shrink: 0; }
.recurso-nacional-link .recurso-ext-icon { color: #bbb; font-size: 0.85rem; flex-shrink: 0; }
.recurso-nacional-link .texto-recurso-nacional { color: #444; font-size: 0.95rem; font-weight: 500; line-height: 1.3; flex: 1; }
.recurso-nacional-link strong { color: var(--primary); }

.recurso-nacional-link.becyt .recurso-icon { color: #00a7e1; }
.recurso-nacional-link.becyt:hover { border-color: #00a7e1; box-shadow: 0 4px 12px rgba(0,167,225,0.15); transform: translateY(-2px); }

.recurso-nacional-link.snrd .recurso-icon { color: #20c997; }
.recurso-nacional-link.snrd:hover { border-color: #20c997; box-shadow: 0 4px 12px rgba(32,201,151,0.15); transform: translateY(-2px); }
.contact-list li { margin-bottom: 15px; display: flex; gap: 15px; color: #555; align-items: flex-start; }
.contact-list i { color: var(--primary); margin-top: 4px; min-width: 25px; text-align: center; font-size: 1.1rem; }
.form-label { 
	display: block; 
	margin-bottom: 10px; 
	font-weight: 600; 
	color: var(--secondary); 
	font-size: 1rem;
}

.form-row { 
	margin-bottom: 25px; 
}
.form-control { 
	width: 100%; padding: 12px; 
	border: 1px solid #ccc; border-radius: 4px; 
	font-size: 1rem; 
	transition: 0.3s; 
}
.form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 114, 187, 0.1); }
.advanced-form-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: #555;
	margin-left: 5px;
	transition: opacity 0.15s ease-in-out;
}

.advanced-form-control {
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 1rem;
	transition: border-color 0.3s;
	background-color: #fcfcfc;
	width: 100%;
}

.advanced-form-control:focus {
	outline: none;
	border-color: var(--primary);
	background-color: white;
	box-shadow: 0 0 0 3px rgba(0, 114, 187, 0.1);
}

select.advanced-form-control {
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 15px top 50%;
	background-size: 10px auto;
	appearance: none;
}
.advanced-form-control::placeholder {
	color: #888;
	opacity: 1;
}

/* =========================================
   ANIMACIÓN DE CARGA (EL VAR) - 3 PUNTOS
   ========================================= */
.modern-loader-container {
	display: none; /* JS lo cambia a 'flex' al buscar */
	position: absolute;
	/* LA MAGIA: Nos saltamos la cabecera (aprox 70px) y ocupamos el resto */
	top: 70px; 
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	z-index: 9999; 
	pointer-events: none; /* Permite clics a través de la animación */
}

.bouncing-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px; /* Un poco más de aire entre los puntos */
}

.bouncing-dots div {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	animation: bounce-dots 0.5s infinite alternate;
}

/* PALETA INSTITUCIONAL DINÁMICA */
.bouncing-dots div:nth-child(1) { 
	background-color: #0072bb; /* Azul INTI */
	animation-delay: 0s; 
}
.bouncing-dots div:nth-child(2) { 
	background-color: #17a2b8; /* Celeste/Turquesa secundario */
	animation-delay: 0.15s; 
}
.bouncing-dots div:nth-child(3) { 
	background-color: #fdb913; /* Amarillo Oro INTI */
	animation-delay: 0.3s; 
}

@keyframes bounce-dots {
	from {
		transform: translateY(0);
		opacity: 0.3; /* Arranca más tenue para un efecto de pulso */
	}
	to {
		transform: translateY(-12px); /* Salto controlado */
		opacity: 1; /* Color pleno al llegar arriba */
	}
}

/* =========================================
   11. MODAL DE RESULTADOS
   ========================================= */
#results-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	padding: 20px;
}

.results-header {
	padding: 15px 25px; 
	background: var(--primary);
	color: white;
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	flex-shrink: 0;
}

.results-header h3 {
	color: white;
	font-size: 1.2rem;
	margin: 0;
}

.modal-close-btn {
	background: none;
	border: none;
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.modal-close-btn:hover { opacity: 1; }

@keyframes modalFadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

.modal-content {
	background: var(--white);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	max-width: 95%;
	width: 1200px;
	height: auto; 
	min-height: 150px;
	max-height: 95vh;
	display: flex;
	flex-direction: column;
	overflow: hidden; 
	position: relative !important; 
	animation: modalFadeIn 0.3s ease-out forwards;
}

.results-frame { 
	width: 100%; 
	height: 0px;
	border: none; 
	display: block;
	overflow: hidden !important;
}

.iframe-container { 
	width: 100%; 
	flex-grow: 1;
	overflow-y: scroll;
	background: #f4f6f8;
}

/* =========================================
   12. ESTILOS PARA LA NUEVA GUÍA DE FUENTES
   ========================================= */
.fuentes-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(46, 61, 73, 0.9)), 
				url('../imagenes/fuentes.avif');
	background-size: cover;
	background-position: center;
	padding: 40px 0 45px 0;
	text-align: center;
	color: white;
	border-radius: 0;
	width: 100%;
}

.fuentes-hero h1 {
	font-family: 'Lora', serif;
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 0; 
}
.fuentes-hero p {
	font-size: 1.1rem;
	opacity: 0.9;
	max-width: 800px;
	margin: 10px auto 0;
}

.fuentes-main-container {
	max-width: 1200px;
	margin: -25px auto 50px;
	padding: 0 20px;
	position: relative;
	z-index: 10;
}

.fuentes-content-container {
	display: flex;
	gap: 24px;
	margin: 0 auto;
	align-items: flex-start;
}

/* V19 Codex: portada de Fuentes mas compacta y simetrica. */
.fuentes-left-column {
	flex: 1;
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: var(--shadow);
	padding: 24px;
	border-top: 5px solid #cce3f6; 
	transition: all 0.3s ease;
	align-self: stretch;
	min-height: 690px;
}

.fuentes-left-column:hover {
	border-top-color: var(--accent);
}

.fuentes-column-title {
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 14px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--border);
	display: flex;
	align-items: center;
	gap: 8px;
}

.fuentes-column-title i {
	color: var(--accent);
	font-size: 1.1rem;
}

.fuentes-menu-container {
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--border);
}

.fuentes-menu-option {
	display: block;
	text-decoration: none;
	background-color: var(--white);
	transition: all 0.3s ease;
	position: relative;
	border-bottom: 1px solid var(--border);
}

.fuentes-menu-option:not(:last-child) {
	border-bottom: 1px solid var(--border);
}

.fuentes-menu-option:last-child {
	border-bottom: none;
}

.fuentes-menu-option.primeras-ppales {
	background-color: #f8fafc;
}

.fuentes-menu-option.amarillo-unico {
	background-color: #fef9e7 !important;
}

.fuentes-menu-option > .fuentes-option-content:hover,
.fuentes-menu-option.primeras-ppales > .fuentes-option-content:hover {
	background-color: #e8f4fd !important;
	position: relative;
	z-index: 1;
}

.fuentes-submenu a.fuentes-menu-option .fuentes-option-content:hover,
.fuentes-sub-submenu a.fuentes-menu-option .fuentes-option-content:hover {
	background-color: #e8f4fd !important;
}

.fuentes-submenu > .fuentes-menu-option.primeras-ppales:hover,
.fuentes-sub-submenu > .fuentes-menu-option.primeras-ppales:hover {
	background-color: #f8fafc !important;
}

.fuentes-sub-submenu > a.fuentes-menu-option.primeras-ppales:hover {
	background-color: inherit !important;
}

.fuentes-sub-submenu > a.fuentes-menu-option.primeras-ppales:hover .fuentes-option-content {
	background-color: #e8f4fd !important;
}

.fuentes-option-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 18px;
	transition: all 0.2s;
	width: 100%;
	cursor: pointer;
}

.fuentes-option-text {
	font-size: 0.96rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-grow: 1;
	line-height: 1.3;
}

.fuentes-option-text i {
	color: var(--primary);
	font-size: 0.88rem;
	width: 19px;
	text-align: center;
}

.fuentes-submenu-toggle-arrow {
	font-size: 0.9rem;
	color: var(--primary);
	transition: transform 0.3s;
	margin-left: 10px;
	transform: rotate(0deg);
	display: inline-block;
}

.fuentes-menu-option.active .fuentes-submenu-toggle-arrow {
	transform: rotate(90deg);
}

.fuentes-submenu .fuentes-submenu-toggle-arrow,
.fuentes-sub-submenu .fuentes-submenu-toggle-arrow {
	transform: rotate(0deg) !important;
}

.fuentes-submenu .fuentes-menu-option.active .fuentes-submenu-toggle-arrow,
.fuentes-sub-submenu .fuentes-menu-option.active .fuentes-submenu-toggle-arrow {
	transform: rotate(90deg) !important;
}

.fuentes-option-note {
	font-size: 0.8rem;
	color: #888;
	padding: 5px 18px 8px 46px;
	display: block;
	line-height: 1.38;
	font-style: normal;
	background-color: inherit;
	margin-top: 0;
	position: relative;
}

.fuentes-submenu .fuentes-option-note {
	padding-left: 38px;
}

.fuentes-sub-submenu .fuentes-option-note {
	padding-left: 54px;
}

.fuentes-submenu, .fuentes-sub-submenu {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.fuentes-submenu.active, .fuentes-sub-submenu.active {
	max-height: 1500px;
	opacity: 1;
}

.fuentes-submenu > a.fuentes-menu-option,
.fuentes-sub-submenu > a.fuentes-menu-option,
.fuentes-submenu > .fuentes-menu-option,
.fuentes-sub-submenu > .fuentes-menu-option {
	display: block;
	padding: 0 !important;
	margin: 0 !important;
	background-color: inherit;
	border-bottom: none !important;
}

.fuentes-submenu > a.fuentes-menu-option .fuentes-option-content,
.fuentes-sub-submenu > a.fuentes-menu-option .fuentes-option-content,
.fuentes-submenu > .fuentes-menu-option .fuentes-option-content,
.fuentes-sub-submenu > .fuentes-menu-option .fuentes-option-content {
	padding: 8px 18px 8px 38px !important;
	border-top: 1px solid var(--border);
	background-color: inherit;
}

.fuentes-sub-submenu > a.fuentes-menu-option .fuentes-option-content,
.fuentes-sub-submenu > .fuentes-menu-option .fuentes-option-content {
	padding-left: 54px !important;
}

.fuentes-submenu-note {
	background-color: #f0f4f8;
	font-size: 0.8rem;
	color: #666;
	padding: 7px 18px;
	text-align: left;
	line-height: 1.36;
	font-style: normal;
	border-top: 1px solid var(--border);
	margin-top: 0;
	padding-left: 38px;
}

.fuentes-submenu-note.bottom-note {
	border-top: 1px solid var(--border);
	border-bottom: none;
}

.fuentes-right-column {
	flex: 1;
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: var(--shadow);
	padding: 24px;
	border-top: 5px solid #cce3f6; 
	transition: all 0.3s ease;
	max-height: 900px;
	overflow-y: auto;
	position: sticky;
	top: 20px;
	align-self: flex-start;
	height: 690px;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.fuentes-right-column:hover {
	border-top-color: var(--accent);
}

.fuentes-right-column-content {
	flex-grow: 1;
}

.fuentes-right-column::-webkit-scrollbar {
	width: 6px;
}

.fuentes-right-column::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.fuentes-right-column::-webkit-scrollbar-thumb {
	background: var(--primary);
	border-radius: 3px;
}

.fuentes-right-column-text {
	color: #666;
	font-size: 0.88rem;
	text-align: left;
	margin-bottom: 18px;
	line-height: 1.38;
}

.fuentes-search-form {
	background-color: #f8fafc;
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 28px;
	border: 1px solid var(--border);
}

.fuentes-form-note {
	font-size: 0.82rem;
	color: #888;
	text-align: left;
	margin-bottom: 16px;
	line-height: 1.36;
	background-color: rgba(253, 185, 19, 0.1);
	padding: 10px 12px;
	border-radius: 4px;
	border-left: 3px solid var(--accent);
}

.fuentes-form-group {
	margin-bottom: 16px;
}

.fuentes-search-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 0.96rem;
	transition: 0.3s;
	background-color: var(--white);
}

.fuentes-search-input:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 114, 187, 0.1);
}

.fuentes-search-buttons {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	width: 100%;
}

.fuentes-search-buttons .btn-primary {
	flex: 2;
}

.fuentes-search-buttons .btn-secondary {
	flex: 1;
}

.fuentes-index-title {
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 18px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--border);
	display: flex;
	align-items: center;
	gap: 8px;
}

.fuentes-index-title i {
	color: var(--accent);
	font-size: 1.1rem;
}

.fuentes-alpha-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
	gap: 7px;
	margin-bottom: 16px;
	width: 100%;
}

.fuentes-alpha-grid-last {
	max-width: 370px;
	margin: 0 auto;
	grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
}

.fuentes-alpha-item {
	background-color: #f8fafc;
	border: 1px solid var(--border);
	border-radius: 4px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--secondary);
	font-size: 1rem;
	transition: all 0.3s;
	text-decoration: none;
	min-width: 46px;
}

.fuentes-alpha-item:hover {
	background-color: var(--primary);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fuentes-sin-subrayado {
	text-decoration: none !important;
	display: block;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fuentes-search-input::placeholder {
	color: #adb5bd;
	opacity: 1;
}

/* =========================================
   13. NOVEDADES Y FAQ
   ========================================= */
.news-container { 
	display: block;
}

.timeline {
    position: relative;
    margin-top: 10px;
    padding-bottom: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e2e8f0;
}

.timeline-year-marker {
    position: relative;
    display: inline-flex;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-weight: bold;
    font-size: 1rem;
    padding: 4px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    margin-top: 10px;
    z-index: 1;
    transform: translateX(calc(21px - 50%));
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-item {
    position: relative;
    margin-bottom: 15px;
    padding-left: 55px; /* Space for the line and dot */
}

.timeline-dot {
    position: absolute;
    left: 14.5px; /* Center over the 3px line at 20px (20 + 1.5 = 21.5 center. 21.5 - 7 = 14.5) */
    top: 20px; 
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--accent);
    z-index: 1;
    box-shadow: 0 0 0 2px white;
}

.news-item { 
	display: flex; 
	gap: 15px; 
	background: white; 
	padding: 15px 20px; 
	border-radius: 8px; 
	border-left: 4px solid var(--accent); 
	box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.news-item h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.news-item p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

.news-date { text-align: center; min-width: 50px; }
.day { font-size: 1.5rem; font-weight: 700; color: var(--primary); display: block; line-height: 1; }
.month { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: #64748b; }

/* Timeline Responsive Fixes */
@media (max-width: 600px) {
    .timeline::before {
        left: 10px;
    }
    .timeline-year-marker {
        transform: none;
        margin-left: 0;
    }
    .timeline-item {
        padding-left: 35px;
    }
    .timeline-dot {
        left: 4.5px;
    }
    .news-item {
        flex-direction: column;
        gap: 8px;
    }
    .news-date {
        text-align: left;
        display: flex;
        gap: 8px;
        align-items: baseline;
    }
    .day { display: inline; font-size: 1.2rem; }
    .month { display: inline; }
}

.noticias-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(46, 61, 73, 0.9)), 
				url('../imagenes/noticias.avif');
	background-size: cover;
	background-position: center;
	padding: 40px 0 45px 0;
	text-align: center;
	color: white;
	border-radius: 0;
	width: 100%;
}

.noticias-hero h1 { 
	font-family: 'Lora', serif;
	font-size: 2.5rem; 
	font-weight: 700; 
	margin-bottom: 10px; 
}

.noticias-hero p { 
	font-size: 1.1rem; 
	opacity: 0.9; 
	max-width: 800px; 
	margin: 0 auto; 
}

/* =========================================
   CENTRO DE ASISTENCIA (AYUDA) - DISEÑO DEFINITIVO
   ========================================= */
.ayuda-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(46, 61, 73, 0.9)), 
				url('../imagenes/ayuda.avif');
	background-size: cover; background-position: center;
	padding: 40px 0; text-align: center; color: white; width: 100%;
}
.ayuda-hero h1 { font-family: 'Lora', serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; }
.ayuda-hero p { font-size: 1.1rem; opacity: 0.9; max-width: 800px; margin: 0 auto; }

.ayuda-content-container { max-width: 950px; padding-top: 30px; padding-bottom: 60px; }

.ayuda-buscador-moderno {
	display: flex; align-items: center; background: white;
	border: 2px solid #e1e5e9; border-radius: 12px;
	padding: 8px 20px; margin-bottom: 35px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: all 0.3s ease;
}
.ayuda-buscador-moderno:focus-within {
	border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0, 114, 187, 0.1);
}
.ayuda-buscador-moderno i { font-size: 1.2rem; color: var(--primary); opacity: 0.7; margin-right: 15px; }
.ayuda-buscador-moderno input {
	flex-grow: 1; border: none; padding: 12px 0; font-size: 1.1rem;
	color: #333; outline: none; background: transparent;
}
.ayuda-buscador-moderno input::placeholder { color: #adb5bd; }

.ayuda-buscador-moderno input:-webkit-autofill,
.ayuda-buscador-moderno input:-webkit-autofill:hover, 
.ayuda-buscador-moderno input:-webkit-autofill:focus, 
.ayuda-buscador-moderno input:-webkit-autofill:active{
	-webkit-box-shadow: 0 0 0 30px white inset !important;
	-webkit-text-fill-color: #333 !important;
	transition: background-color 5000s ease-in-out 0s;
}

.ayuda-filtros-grid {
	display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 35px; justify-content: center;
}
.ayuda-chip-rect {
	background: white; border: 1px solid #d0d7de; padding: 12px 20px; border-radius: 6px;
	color: #555; font-size: 0.95rem; font-family: 'Roboto', sans-serif; font-weight: 700;
	cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.ayuda-chip-rect i { color: #888; font-size: 1.1rem; }

.ayuda-chip-rect:hover {
	border-color: var(--primary);
	background: white;
	color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 114, 187, 0.15);
}
.ayuda-chip-rect:hover i { color: var(--primary); }

.ayuda-chip-rect.active {
	background: #e8f4fd; 
	border-color: #cce3f6; 
	color: var(--primary); 
	transform: translateY(0);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}
.ayuda-chip-rect.active i { color: var(--accent); }

.ayuda-card-acordeon {
	background: white; 
	border: 1px solid var(--border); 
	border-left: 4px solid transparent; /* LO CLAVAMOS TRANSPARENTE DE ENTRADA */
	border-radius: 8px;
	margin-bottom: 15px; 
	overflow: hidden; 
	box-shadow: 0 2px 6px rgba(0,0,0,0.03); 
	/* Solo animamos el color del borde y la sombra, no el grosor */
	transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}
.ayuda-card-acordeon:hover { border-color: #cce3f6; }

.ayuda-card-pregunta {
	padding: 20px 25px; font-size: 1.05rem; font-weight: 600; color: var(--secondary);
	cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	transition: background 0.2s, color 0.2s; user-select: none;
}

.ayuda-card-pregunta span i { opacity: 0.45; }
.ayuda-card-pregunta .arrow { color: #adb5bd; transition: transform 0.3s ease; font-size: 1rem; }

.ayuda-card-pregunta:hover { background-color: #fcfcfc; color: var(--primary); }
.ayuda-card-pregunta:hover .arrow { color: var(--primary); }

.ayuda-card-acordeon.open { border-color: #cce3f6; border-left: 4px solid #cce3f6; }
.ayuda-card-acordeon.open .ayuda-card-pregunta { color: var(--primary); border-bottom: 1px solid #f1f5f9; background: #fafcff; }
.ayuda-card-acordeon.open .ayuda-card-pregunta .arrow { transform: rotate(180deg); color: var(--primary); }

.ayuda-card-respuesta { max-height: 0; overflow: hidden; padding: 0 25px; opacity: 0; color: #444; transition: 0.35s ease; }
.ayuda-card-acordeon.open .ayuda-card-respuesta { max-height: 800px; padding: 20px 25px; opacity: 1; }
.ayuda-card-respuesta p { margin-bottom: 12px; text-align: justify; line-height: 1.6; }
.ayuda-card-respuesta p:last-child { margin-bottom: 0; }

.ayuda-ejemplo-caja {
	background-color: #fef9e7; border-left: 4px solid var(--accent); padding: 15px 18px;
	border-radius: 4px; margin: 15px 0; font-size: 0.95rem; color: #333; line-height: 1.5;
}
.ayuda-resalte-color { color: var(--primary); font-weight: 600; }
.ayuda-etiqueta { background-color: #f1f5f9; color: #d9455f; border: 1px solid #e2e8f0; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-weight: bold; font-size: 1.05rem; }
.ayuda-etiqueta-bool { background-color: #e8f4fd; color: var(--primary); border: 1px solid #cce3f6; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 0.9rem; margin-right: 5px; }
.ayuda-lista-vineta { list-style: none; padding: 0; margin: 15px 0; }
.ayuda-lista-vineta li { position: relative; padding-left: 22px; margin-bottom: 10px; text-align: justify; }
.ayuda-lista-vineta li::before {
	content: "\f105";
	font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
	font-weight: 900 !important;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	left: 0;
	top: 2px;
	color: #fdb913;
}

.ayuda-cta-banner {
	background-color: #eef5fb; border: 1px solid #cce3f6; border-radius: 8px;
	padding: 25px 30px; margin-top: 40px; display: flex; justify-content: space-between;
	align-items: center; border-left: 4px solid var(--primary);
}
.ayuda-cta-content { display: flex; align-items: center; gap: 20px; }
.ayuda-cta-content i { font-size: 2.5rem; color: var(--primary); opacity: 0.8; }
.ayuda-cta-content h4 { color: var(--primary); font-size: 1.2rem; margin-bottom: 5px; }
.ayuda-cta-content p { color: #555; margin: 0; font-size: 0.95rem; }

/* =========================================
   SEPARADORES DE GRUPOS (Vista "Todas")
   ========================================= */
.ayuda-separador {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 35px 0 20px 0;
	color: #888;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.ayuda-separador::before,
.ayuda-separador::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #e1e5e9;
}

.ayuda-separador::before { margin-right: 15px; }
.ayuda-separador::after { margin-left: 15px; }

#ayuda-lista-acordeones .ayuda-separador:first-child {
	margin-top: 10px;
}

/* =========================================
   CORRECCIÓN DEL SALTO VISUAL MILIMÉTRICO
   ========================================= */
#ayuda-lista-acordeones {
	display: flex;
	flex-direction: column;
}

#ayuda-lista-acordeones .ayuda-separador:first-child {
	margin-top: 0; 
}

/* =========================================
   14. FOOTER Y BOTÓN "IR ARRIBA"
   ========================================= */
footer { 
	background: var(--gov-blue); color: #ccc; 
	padding: 30px 0 20px; 
	margin-top: 0; font-size: 0.9rem; 
	position: relative;
	z-index: 1;
}
.footer-grid { 
	display: flex; 
	justify-content: flex-start; 
	gap: 60px; 
	margin-bottom: 30px; 
	text-align: left; 
}

.social-links {
	display: flex;
	gap: 15px;
	margin-top: 15px;
	justify-content: flex-start;
}

.footer-col {
	display: flex;
	flex-direction: column; 
	align-items: flex-start;
}
.footer-col h4 { 
	color: white; 
	margin-bottom: 15px; 
	border-bottom: 2px solid var(--accent); 
	display: inline-block; 
	padding-bottom: 5px;
	font-family: 'Lora', serif;
}

.social-links a {
	font-size: 1.5rem;
	color: #ccc;
	transition: color 0.3s;
}

.social-links a:hover {
	color: var(--accent);
	text-decoration: none;
}

.footer-col a:hover { color: white; text-decoration: underline; }

.scroll-to-top-btn {
	position: fixed;
	bottom: 30px;
	right: 30px;
	background-color: var(--gov-accent);
	color: var(--white);
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 1.4rem;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1500;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.2s ease;
}

.scroll-to-top-btn.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.scroll-to-top-btn:hover {
	background-color: #d1a154;
	transform: scale(1.1);
}

/* =========================================
   BOTÓN FLOTANTE EXCLUSIVO DEL MODAL
   ========================================= */
.modal-scroll-fab {
	position: absolute; 
	bottom: 170px !important; 
	right: 24px !important;
	width: 46px !important; 
	height: 46px !important; 
	border-radius: 50%;
	background: rgba(61, 107, 94, 0.85) !important; 
	color: #ffffff !important; 
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem !important; 
	box-shadow: 0 4px 12px rgba(61, 107, 94, 0.25) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px);
	z-index: 2010;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
	outline: none;
	transform: translateY(15px);
}

#fuentesScrollFab {
	bottom: 50px !important;
}

.modal-scroll-fab i {
	transition: transform 0.3s ease;
}

.modal-scroll-fab.visible {
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: translateY(0) scale(1) !important;
}

.modal-scroll-fab:hover {
	background: rgba(61, 107, 94, 1) !important;
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 6px 16px rgba(61, 107, 94, 0.4) !important;
}
/* =========================================
   JERARQUÍA DE 4 NIVELES - GRADIENTE DE PASTELES
   ========================================= */
.fuentes-menu-option.color-nivel-1 {
	background-color: #e8f4ff !important;
}

.fuentes-menu-option.color-nivel-1 .fuentes-option-content {
	background-color: inherit !important;
}

.fuentes-menu-option.color-nivel-1:hover,
.fuentes-menu-option.color-nivel-1 .fuentes-option-content:hover {
	background-color: #d9ecff !important;
}

.fuentes-menu-option.color-nivel-2 {
	background-color: #f5f2ff !important;
}

.fuentes-menu-option.color-nivel-2 .fuentes-option-content {
	background-color: inherit !important;
}

.fuentes-menu-option.color-nivel-2:hover,
.fuentes-menu-option.color-nivel-2 .fuentes-option-content:hover {
	background-color: #ece8ff !important;
}

.fuentes-menu-option.color-nivel-3 {
	background-color: #f2fff9 !important;
}

.fuentes-menu-option.color-nivel-3 .fuentes-option-content {
	background-color: inherit !important;
}

.fuentes-menu-option.color-nivel-3:hover,
.fuentes-menu-option.color-nivel-3 .fuentes-option-content:hover {
	background-color: #e8fff3 !important;
}

.fuentes-menu-option.color-nivel-4 {
	background-color: #fff5f9 !important;
}

.fuentes-menu-option.color-nivel-4 .fuentes-option-content {
	background-color: inherit !important;
}

.fuentes-menu-option.color-nivel-4:hover,
.fuentes-menu-option.color-nivel-4 .fuentes-option-content:hover {
	background-color: #ffecf3 !important;
}

.advanced-form-control::placeholder {
	color: #adb5bd;
}

.footer-mapa-link {
	font-weight: 700 !important;
	font-size: 1rem !important;
}


/* =========================================
   18. DICCIONARIOS TÉCNICOS
   ========================================= */
.diccionarios-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(46, 61, 73, 0.9)), 
				url('../imagenes/diccionarios.avif');
	background-size: cover; background-position: center;
	padding: 40px 0 45px 0;
	text-align: center; color: white; width: 100%;
}

.diccionarios-main-container {
	max-width: 1200px;
	margin: -25px auto 50px;
	padding: 0 20px;
	position: relative;
	z-index: 10;
}

#diccionarios select.advanced-form-control {
	padding-right: 30px !important;
	background-position: right 10px center !important;
	text-overflow: ellipsis;
}
.diccionarios-hero h1 { font-family: 'Lora', serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; }
.diccionarios-hero p { font-size: 1.1rem; opacity: 0.9; max-width: 800px; margin: 0 auto; }

.diccionarios-grid {
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 30px; 
	align-items: start;
}

.diccionario-card {
	background: var(--white); 
	border: none; 
	border-radius: 10px;
	padding: 35px 30px; 
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border-top: 5px solid #cce3f6;
	display: flex; 
	flex-direction: column; 
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}

.diccionario-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* Identidad Tematica */
.diccionario-card.dicc-cobre { border-top-color: #fef3c7; transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; }
.diccionario-card.dicc-cobre:hover { border-top-color: #d97706; }
.diccionario-card.dicc-cobre .card-header h3 i { background: #fef3c7; color: #d97706; padding: 12px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; }
.diccionario-card.dicc-cobre .btn-dicc { background-color: #d97706; }
.diccionario-card.dicc-cobre .btn-dicc:hover { background-color: #b45309; }
.diccionario-card.dicc-cobre .advanced-form-control:focus { border-bottom-color: #d97706; box-shadow: 0 4px 6px -1px rgba(217, 119, 6, 0.1); }

.diccionario-card.dicc-caucho { border-top-color: #ccfbf1; transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; }
.diccionario-card.dicc-caucho:hover { border-top-color: #0f766e; }
.diccionario-card.dicc-caucho .card-header h3 i { background: #ccfbf1; color: #0f766e; padding: 12px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; }
.diccionario-card.dicc-caucho .btn-dicc { background-color: #0f766e; }
.diccionario-card.dicc-caucho .btn-dicc:hover { background-color: #0f5a54; }
.diccionario-card.dicc-caucho .advanced-form-control:focus { border-bottom-color: #0f766e; box-shadow: 0 4px 6px -1px rgba(15, 118, 110, 0.1); }

.diccionario-card.dicc-end { border-top-color: #e0f2fe; transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; }
.diccionario-card.dicc-end:hover { border-top-color: #0284c7; }
.diccionario-card.dicc-end .card-header h3 i { background: #e0f2fe; color: #0284c7; padding: 12px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; }
.diccionario-card.dicc-end .btn-dicc { background-color: #0284c7; }
.diccionario-card.dicc-end .btn-dicc:hover { background-color: #0369a1; }
.diccionario-card.dicc-end .advanced-form-control:focus { border-bottom-color: #0284c7; box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.1); }

.diccionario-card .card-header {
	display: flex; 
	justify-content: space-between; 
	align-items: flex-start;
	min-height: auto; 
	margin-bottom: 15px; 
	padding-bottom: 15px; 
	border-bottom: 1px solid var(--border);
}

.dicc-title-group { 
	display: flex; 
	flex-direction: column; 
	gap: 4px; 
	flex: 1; 
	padding-right: 15px;
}

.diccionario-card .card-header h3 {
	font-size: 1.5rem; 
	color: var(--primary); margin: 0; display: flex; align-items: center; gap: 10px; line-height: 1.2; 
}

.diccionario-card .card-header h3 i { width: 25px; text-align: center; }

.dicc-subtitle { 
	font-size: 0.95rem; 
	color: #777; font-weight: 500; margin-left: 35px; 
}

.resena-badge {
	font-size: 1.5rem;
	color: var(--primary);
	background: transparent; 
	border: none;
	padding: 0;
	cursor: pointer; 
	transition: all 0.2s; 
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
	position: relative;
	z-index: 25;
}

.resena-badge:hover { 
	color: var(--primary-dark); 
	transform: scale(1.15);
}

.resena-badge { color: var(--primary); }
.resena-badge.activa {
	background: #1e293b !important;
	color: #ffffff !important;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	margin-top: -2px;
	margin-right: -2px;
}
.resena-badge.activa i { font-size: 1.1rem; }
.resena-badge.activa:hover {
	background: #0f172a !important;
	color: #ffffff !important;
	transform: scale(1.1);
}

.diccionario-resena {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 20;
	opacity: 0; visibility: hidden;
	padding: 50px 30px 30px 30px;
	font-size: 0.95rem; color: #334155; line-height: 1.6; text-align: justify;
	transition: all 0.3s ease;
	display: flex; flex-direction: column; justify-content: flex-start;
	overflow-y: auto;
	border-radius: 10px;
	pointer-events: none;
}
.diccionario-resena::-webkit-scrollbar { width: 6px; }
.diccionario-resena::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }


.diccionario-resena.abierto {
	opacity: 1; visibility: visible;
	pointer-events: auto;
}

.diccionario-resena p { margin-bottom: 10px; }
.diccionario-resena p:last-child { margin-bottom: 0; }

.diccionario-card form {
	display: flex;
	flex-direction: column;
	flex-grow: 1; 
	justify-content: flex-end; 
}

.diccionario-form-row { margin-bottom: 15px; } 
.dicc-flex-row { display: flex; gap: 12px; } 

.diccionario-card .advanced-form-control {
	height: 48px; 
	font-size: 1rem;
	background-color: #f1f5f9; 
	border: none;
	border-bottom: 2px solid #cbd5e1; 
	border-radius: 8px 8px 0 0;
	transition: all 0.3s;
	padding: 0 15px;
}

.diccionario-card .advanced-form-control:focus {
	background-color: #f8fafc;
	outline: none;
}

.btn-dicc { 
	width: 100%; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	gap: 8px; 
	height: 46px; 
	font-size: 1rem;
	font-weight: 700;
	text-transform: none; 
	margin-top: 10px;
	border-radius: 6px;
	border: none;
	background-color: var(--primary);
	color: white;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 114, 187, 0.15); 
	transition: all 0.3s ease;
}

.btn-dicc:hover { 
	box-shadow: 0 4px 10px rgba(0, 114, 187, 0.25); 
	transform: translateY(-1px); 
}

.toggle-avanzada-dicc {
	color: #64748b; font-size: 0.85rem; cursor: pointer; display: inline-flex;
	align-items: center; justify-content: center; gap: 8px; margin: 15px 0 5px 0; font-weight: 600; 
	transition: all 0.3s ease; background: transparent; border: 1px solid #cbd5e1;
	border-radius: 8px; padding: 10px; width: 100%;
}
.toggle-avanzada-dicc:hover { color: var(--primary); border-color: var(--primary); background: #f0f9ff; }

.diccionario-avanzada {
	max-height: 0; opacity: 0; overflow: hidden;
	margin-top: 0; padding: 0 15px; border-width: 0;
	background: #f8fafc; border-style: solid; border-color: var(--border); border-radius: 6px;
	transition: all 0.35s ease-in-out;
}
.diccionario-avanzada.abierto {
	max-height: 600px; opacity: 1;
	margin-top: 10px; padding: 15px; border-width: 1px;
}

.toggle-ayuda-btn {
	color: var(--primary); font-size: 0.85rem; cursor: pointer; display: inline-block;
	margin-bottom: 12px; font-weight: 500; transition: all 0.2s;
}
.toggle-ayuda-btn:hover { text-decoration: underline; }

.ayuda-booleana {
	max-height: 0; opacity: 0; overflow: hidden;
	margin-bottom: 0; padding: 0 15px; border-width: 0;
	background-color: var(--light-blue-bg); border-style: solid; border-color: rgba(0, 114, 187, 0.2);
	border-left: 3px solid var(--primary); font-size: 0.85rem; color: #444; border-radius: 4px; line-height: 1.4; text-align: justify;
	transition: all 0.35s ease-in-out;
}
.ayuda-booleana.abierto {
	max-height: 300px; opacity: 1;
	margin-bottom: 15px; padding: 12px 15px; border-width: 1px;
}

/* =========================================
   BOTONES DE COMPARTIR Y GUARDAR
   ========================================= */
.btn-share-link {
    background-color: var(--accent);
    color: #232d4f;
    border: 2px solid transparent; /* Le damos un borde invisible para igualar la matemática */
    border-radius: 6px;
    padding: 6px 16px;
    box-sizing: border-box; /* Calcula el tamaño hacia adentro */
    height: 38px; /* Altura forzada idéntica */
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.btn-share-link:hover {
	background-color: #ffc933;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.btn-share-link i {
	font-size: 1rem;
	color: #232d4f;
}

.toast-notification {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(100px); 
	background-color: #333;
	color: white;
	padding: 12px 24px;
	border-radius: 50px;
	font-size: 0.95rem;
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	z-index: 3000; 
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.toast-notification.show {
	transform: translateX(-50%) translateY(0); 
	opacity: 1;
}

.btn-guardar-busqueda {
    background-color: white;
    color: var(--primary);
    border: 2px solid white;
    border-radius: 6px;
    padding: 6px 16px;
    box-sizing: border-box; /* Calcula el tamaño hacia adentro */
    height: 38px; /* Altura forzada idéntica */
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-guardar-busqueda:hover {
    background-color: transparent;
    color: white;
}

.btn-guardar-busqueda.ya-guardada {
    background-color: var(--accent);
    color: #232d4f;
    border-color: var(--accent);
}

.busqueda-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px 18px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.busqueda-item-titulo {
    font-weight: 700;
    color: var(--secondary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.busqueda-item-meta {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.busqueda-btn-relanzar {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
    font-family: 'Roboto', sans-serif;
}

.busqueda-btn-relanzar:hover {
    background: var(--primary-dark);
}

.busqueda-btn-copiar {
    background: white;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: 'Roboto', sans-serif;
}

.busqueda-btn-copiar:hover {
    background: #f0f7ff;
}

.busquedas-vacio {
    text-align: center;
    padding: 50px 20px;
    color: #aaa;
}

.busquedas-vacio i {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    opacity: 0.4;
}

/* --- MEJORAS LISTADO DE BÚSQUEDAS --- */

/* La "X" para borrar: sutil por defecto, alerta al hover */
.busqueda-btn-borrar {
    background: transparent;
    color: #adb5bd;
    border: none;
    transition: all 0.2s ease;
    padding: 6px 10px;
    border-radius: 6px;
    margin-left: auto; /* Empuja el botón al extremo derecho */
    cursor: pointer;
}

.busqueda-btn-borrar:hover {
    color: #dc3545; 
    background-color: #f8d7da; 
}

/* Alineamos los botones para que el margin-left: auto de la X funcione perfecto */
.busqueda-item-acciones {
    display: flex; 
    gap: 8px; 
    align-items: center;
    margin-top: 12px;
}

#btn-mis-busquedas:hover {
    background-color: rgba(0, 114, 187, 0.05) !important;
    color: var(--primary) !important;
}


/* =========================================
   REFUERZO FINAL: MÁXIMO APROVECHAMIENTO DE ESPACIO
   ========================================= */
@media (max-width: 1200px) {
	.cards-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.card {
		flex: 1 1 280px; 
		max-width: 380px; 
		margin: 0; 
	}
}

/* =========================================
   AUTOCOMPLETAR TESAURO (Tarjeta Flotante)
========================================= */
.sugerencias-lista {
    position: absolute;
    top: calc(100% + 8px); 
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border); 
    border-radius: 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    max-height: 280px;
    overflow-y: auto;
    z-index: 2000;
    margin: 0;
    padding: 0;
    list-style: none;
    clip-path: inset(0 round 12px);
    transform: translateZ(0);
}

.sugerencias-lista li.sugerencia-activa {
    background: #e8f4fd;
    color: var(--primary);
    padding-left: 22px;
}

.sugerencias-lista li {
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    color: #444;
    font-size: 0.95rem;
    transition: background 0.2s;
    text-align: left;
}

.sugerencias-lista li:last-child {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.sugerencias-lista li:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Custom Scrollbar to respect border-radius */
.sugerencias-lista::-webkit-scrollbar {
    width: 8px;
}
.sugerencias-lista::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sugerencias-lista::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 8px;
}
.sugerencias-lista::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.sugerencias-lista li:hover {
    background: #f8fafc;
    color: var(--primary);
    padding-left: 22px;
}

.sugerencias-lista li strong {
    color: var(--primary);
    font-weight: 700;
}


/* =========================================
   19. PANEL LATERAL DE CONTACTO (RENOVADO)
   ========================================= */

/* Fondo oscuro (Backdrop) */
.contact-backdrop {
	position: fixed;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 1998;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.contact-backdrop.activo {
	opacity: 1;
	visibility: visible;
}

.side-panel-container {
	position: fixed;
	/* FIX A PRUEBA DE BALAS: Anclaje inferior. Jamás chocará con el header superior */
	bottom: 40px; 
	right: -360px; 
	width: 360px;
	background: white;
	box-shadow: -5px 0 25px rgba(0,0,0,0.15);
	z-index: 1999;
	transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-radius: 12px 0 0 12px;
	border-left: 4px solid var(--primary);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 80px); /* Previene que se desborde si la pantalla es enana */
}

.side-panel-container.abierto {
	right: 0;
}

.side-panel-tab {
	position: absolute;
	left: -40px;
	bottom: 90px; 
	background: var(--primary);
	color: white;
	border: none;
	width: 40px;
	height: 130px;
	border-radius: 8px 0 0 8px;
	cursor: pointer;
	box-shadow: -4px 0 10px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transition: background 0.3s, transform 0.2s;
}

.side-panel-tab:hover {
	background: var(--primary-dark);
}

.side-panel-tab i { 
	font-size: 1.2rem; 
}

.side-panel-tab span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	letter-spacing: 1px;
	font-size: 0.9rem; 
}

.side-panel-content {
	padding: 30px 25px;
	flex-grow: 1;
	overflow-y: auto;
}

.side-panel-header {
	margin-bottom: 25px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 15px;
}

.side-panel-header h3 {
	color: var(--primary);
	margin-bottom: 8px;
	font-size: 1.4rem;
	display: flex;
	align-items: center;
}

.side-panel-header p {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.5;
	margin: 0;
}

/* --- Diseño de Tarjetas Interactivas --- */
.contact-cards-wrapper {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.contact-action-card {
	display: flex;
	align-items: center;
	padding: 18px 15px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.contact-action-card:hover {
	background: #ffffff;
	border-color: var(--primary);
	box-shadow: 0 4px 15px rgba(0, 114, 187, 0.1);
	transform: translateY(-3px);
}

.cac-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-right: 15px;
	flex-shrink: 0;
}

.email-icon { background: #e3f2fd; color: #0072bb; }
.form-icon  { background: #e8f5e9; color: #2e7d32; }

.cac-info {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.cac-info h4 {
	color: var(--secondary);
	margin: 0 0 4px 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.cac-info p {
	margin: 0;
	color: #666;
	font-size: 0.9rem;
}

.external-icon {
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 0.8rem;
	color: #adb5bd;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	transform: translate(-5px, 5px);
}

.contact-action-card:hover .external-icon {
	opacity: 1;
	color: var(--primary);
	transform: translate(0, 0);
}
.mb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mb-separator {
    color: #adb5bd;
    font-size: 0.7rem;
}

.mb-current {
    font-weight: 700;
    color: var(--primary); /* Se pinta con el color principal del INTI */
}

/* Ajuste para celulares */
@media (max-width: 480px) {
	.side-panel-container { 
		width: 88%; 
		right: -88%; 
	}
	.side-panel-tab { 
		left: -36px; 
		width: 36px; 
		height: 110px; 
		bottom: 80px; 
	}
	.side-panel-tab i { 
		font-size: 1.1rem; 
	}
	.side-panel-tab span { 
		font-size: 0.8rem; 
	}
}

/* ========================================= */
/* TRANSICIÓN SUAVE PARA LOS MODALES         */
/* ========================================= */

/* 1. Creamos la animación de aparición (Fade In) */
@keyframes aparecerModal {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

/* =========================================
   INTEGRACION CATALOGO SEMANTICO
   ========================================= */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.hero {
	padding: 78px 0 112px 0;
}

.semantic-hero-search {
	width: min(920px, 100%);
	margin: 34px auto 0;
}

.semantic-hero-search-box {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.58);
	border-radius: 10px;
	padding: 8px 8px 8px 20px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 114, 187, 0.08);
}

.semantic-hero-search-box > i {
	color: var(--primary);
	font-size: 1.15rem;
	flex-shrink: 0;
}

.semantic-hero-search-box input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	text-overflow: ellipsis;
	color: #1f2937;
	font-family: 'Roboto', sans-serif;
	font-size: 1.08rem;
	height: 48px;
}

.semantic-hero-search-box input::placeholder {
	color: #8a97a6;
}

.semantic-hero-search-box .semantic-search-btn {
	height: 48px;
	border: none;
	border-radius: 8px;
	background: var(--accent);
	color: #232d4f;
	font-weight: 800;
	font-size: 0.96rem;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}

.semantic-hero-search-box .semantic-search-btn:hover {
	background: #ffc73f;
	box-shadow: 0 8px 22px rgba(253, 185, 19, 0.24);
	transform: translateY(-1px);
}

.semantic-hero-search-box .semantic-search-btn:active {
	transform: translateY(0);
}

.cards-grid {
	margin-top: -58px;
}
.semantic-catalog-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(10, 16, 24, 0.82);
	z-index: 2400;
}

.semantic-catalog-modal-content {
	background: white;
	width: min(1500px, 98vw);
	height: auto;
	max-height: 94vh;
	background: #1e293b;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.4s ease;
	animation: modalFadeIn 0.3s ease-out forwards;
}

.semantic-catalog-header {
	min-height: 58px;
	padding: 12px 18px 12px 22px;
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-shrink: 0;
	border-bottom: 3px solid var(--accent);
	border-radius: 8px 8px 0 0;
}

.semantic-catalog-header h3 {
	margin: 0;
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

.semantic-catalog-header h3 i {
	color: var(--accent);
}

.semantic-catalog-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
#semantic-catalog-loading,
#mis-busquedas-loading {
	position: absolute;
	inset: 58px 0 0 0;
	z-index: 2;
	background: rgba(244, 246, 248, 0.82);
}

.mis-busquedas-modal-content {
	width: min(720px, 94vw) !important;
	max-height: 88vh;
}

#mis-busquedas-modal .semantic-catalog-frame {
	min-height: 160px;
	max-height: calc(88vh - 58px);
}

.semantic-catalog-frame {
	transition: height 0.12s cubic-bezier(0.2, 0, 0.2, 1);
	width: 100%;
	/* flex: 1; removed for dynamic height */
	min-height: 0;
	border: none;
	display: block;
	background: #f4f6f8;
	overflow: hidden !important;
}

@media (max-width: 768px) {
	.hero {
		padding: 58px 0 92px 0;
	}

	.semantic-hero-search {
		margin-top: 28px;
	}

	.semantic-hero-search-box {
		gap: 10px;
		padding: 7px 7px 7px 15px;
	}

	.semantic-hero-search-box input {
		font-size: 0.96rem;
		height: 44px;
	}

	.semantic-hero-search-box .semantic-search-btn {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}

	.semantic-hero-search-box .semantic-search-btn span {
		display: none;
	}

	.cards-grid {
		margin-top: -46px;
	}

		.semantic-catalog-modal {
		padding: 0;
		align-items: flex-start !important;
	}

	.semantic-catalog-modal-content {
		transform: translateZ(0);
		isolation: isolate;
		width: 100vw;
		height: 100dvh;
		max-height: none !important;
		border-radius: 0;
		margin: 0 !important;
		border: none !important;
	}

	.mis-busquedas-modal-content {
		width: 100vw !important;
		height: auto !important;
		max-height: none !important;
	}

	.semantic-catalog-header {
		min-height: 54px;
		padding: 10px 12px 10px 16px;
		border-radius: 0;
	}

	.semantic-catalog-header h3 {
		font-size: 0.95rem;
	}

	/* El modal de BiblioData (#herramientas-modal) siempre tiene la clase
	   .modal-fullscreen fija en su HTML (no es un estado que se prenda/apague
	   como en Tesauro) y esa clase trae su propio width/height/margin en
	   96vw/96vh con !important —pensados para escritorio, donde ese 4% de
	   aire alrededor se ve bien—. En mobile, esas reglas !important pisan a
	   las de acá arriba (.semantic-catalog-modal-content en 100vw/100dvh) por
	   tener más especificidad (dos clases vs. una), y el modal queda con un
	   marco de fondo visible alrededor: exactamente lo que no queremos cuando
	   cada píxel de pantalla cuenta. Se la vuelve a pisar acá, con más
	   especificidad todavía (ID + dos clases) y su propio !important, SOLO
	   para BiblioData —Tesauro en fullscreen no se toca—. */
	#herramientas-modal .semantic-catalog-modal-content.modal-fullscreen {
		width: 100vw !important;
		height: 100dvh !important;
		max-width: 100vw !important;
		max-height: 100dvh !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}
}

/* 2. Se la aplicamos al modal del mapa */
#modal-mapa, #mis-busquedas-modal, #fuentes-modal {
    animation: aparecerModal 0.2s ease-out forwards;
}

/* =========================================
   MENÚ DESPLEGABLE "PRODUCTOS" (ANIMADO)
   ========================================= */
.nav-link.dropdown {
    position: relative;
    padding: 0 !important; /* anula el padding heredado */
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px 15px;
    font-weight: 500;
    color: var(--secondary);
    border-radius: 4px;
    transition: 0.2s;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    color: var(--primary);
    background-color: rgba(0, 114, 187, 0.05);
    outline: none;
}

.dropdown-toggle i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.nav-link.dropdown.open .dropdown-toggle i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-radius: 6px;
    min-width: 240px;
    padding: 8px 0;
    z-index: 1000;
    list-style: none;
    
    /* ANIMACIÓN SUAVE PARA ESCRITORIO */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Mostrar al hacer hover o foco (SOLO EN ESCRITORIO) */
@media (min-width: 993px) {
    .nav-link.dropdown:hover .dropdown-menu,
    .nav-link.dropdown:focus-within .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* Esta clase la aplica el JS temporalmente para forzar el cierre aunque esté el mouse encima */
    .nav-link.dropdown.force-close .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) !important;
        pointer-events: none;
    }
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: var(--secondary);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
    background: #f4f6f8;
    color: var(--primary);
}

.dropdown-menu li a i:first-child {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.dropdown-menu li a .fa-external-link-alt {
    font-size: 0.7rem;
    margin-left: auto;
    opacity: 0.6;
}

/* Dropdown en móvil: se comporta como acordeón animado */
@media (max-width: 992px) {
    .nav-link.dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: #f8fafc;
        border-radius: 0;
        padding-left: 20px;
        
        /* ANIMACIÓN ACORDEÓN PARA MÓVIL */
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        transform: none; /* Anulamos el movimiento de la PC */
        transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
    }
    
    .nav-link.dropdown.open .dropdown-menu {
        max-height: 400px;
        opacity: 1;
        visibility: visible;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    
    .dropdown-toggle {
        justify-content: space-between;
        width: 100%;
    }
}

/* =========================================
   PRIORIDAD FINAL - CATALOGO SEMANTICO
   Mantiene el hero y el modal semantico por encima de reglas legado.
   ========================================= */
.hero {
	padding-top: 56px;
	padding-bottom: 84px;
}

.cards-grid {
	margin-top: -30px;
}

.semantic-catalog-modal {
	z-index: 2400;
}

@media (max-width: 768px) {
	.hero {
		padding-top: 40px;
		padding-bottom: 72px;
	}

	.cards-grid {
		margin-top: -24px;
	}
}


/* =========================================
   SECCIÓN INSTITUCIONAL (TARJETAS BLANCAS BALANCEADAS)
   ========================================= */
.institucional-hero {
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(46,61,73,0.9)), 
                url('../imagenes/biblio3.avif');
    background-size: cover;
    background-position: center;
    padding: 45px 0 50px 0;
    text-align: center;
    color: white;
    width: 100%;
}
.institucional-hero h1 {
    font-family: 'Lora', serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.institucional-hero p {
    font-size: 1.15rem;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
    font-weight: 300;
}

.inst-main-container {
    max-width: 1100px;
    margin-top: 40px;
    padding-bottom: 70px;
}

/* Grillas de distribución */
.inst-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.inst-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Tarjetas Blancas Principales */
.inst-modern-card {
    background: var(--white);
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f4f8;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.inst-modern-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 114, 187, 0.06);
    border-color: #cce3f6;
}

/* Contenedor del ícono pastel */
.inst-icon-wrapper {
    width: 54px;
    height: 54px;
    background: #f0f7ff;
    color: var(--primary);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.inst-modern-card h3 {
    color: var(--secondary);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.inst-modern-card p {
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
    text-align: justify;
}

/* Listas con check azul */
.inst-check-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.inst-check-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.inst-check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--primary);
    font-size: 0.8rem;
    background: #f0f7ff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Ítems de la tarjeta de Información General */
.inst-info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.inst-info-item i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 3px;
    min-width: 20px;
    text-align: center;
}

/* Título separador de Servicios */
.inst-section-header {
    text-align: center;
    margin: 50px 0 35px 0;
}

.inst-section-header h2 {
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.inst-divider {
    height: 4px;
    width: 60px;
    background: var(--accent);
    margin: 0 auto;
    border-radius: 2px;
}

/* Tarjetas Grises para Servicios */
.inst-service-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 25px;
    border: 1px solid #edf2f7;
    transition: all 0.3s ease;
}

.inst-service-card:hover {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(0, 114, 187, 0.06);
}

.inst-service-icon {
    color: var(--primary);
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.inst-service-card h4 {
    color: var(--secondary);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.inst-service-card p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.inst-span-2 {
    grid-column: span 2;
}

/* Ajustes Responsivos Móviles */
@media (max-width: 768px) {
    .inst-grid-2, .inst-grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .inst-span-2 {
        grid-column: span 1; 
    }
    .inst-modern-card {
        padding: 25px;
    }
}



/* =========================================
   15-17-18-19. RESPONSIVE — TABLETS Y MÓVILES GRANDES
   ========================================= */
@media (max-width: 992px) {


	/* --- NAVEGACIÓN MÓVIL --- */
    .logo img { 
        height: 38px !important;
        max-width: 105px !important;
    }
    .logo span {
        font-size: 1.05rem !important;
    }

	.header-inner { 
		height: 70px; 
		position: relative; 
	}

	.top-separator { 
		top: 70px; 
	}

	.nav-menu { 
		display: flex;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-15px);
		pointer-events: none;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: absolute; 
		top: 70px; 
		left: 0; 
		width: 100%; 
		background: white; 
		flex-direction: column; 
		padding: 20px; 
		box-shadow: 0 5px 10px rgba(0,0,0,0.1); 
		max-height: calc(100vh - 70px); 
		overflow-y: auto; 
	}

	.nav-menu.active { 
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.mobile-toggle { 
		display: block; 
		margin-left: auto; 
		padding-right: 15px; 
	}

	/* --- MODALES --- */
	div#results-modal, 
	div#fuentes-modal { 
		padding: 0 !important; 
		align-items: flex-start !important;
		height: 100vh !important;        /* fallback */
		height: 100dvh !important;       /* browsers modernos */
	}
/* --- HOME & GENERAL --- */
	.info-grid { 
		grid-template-columns: 1fr; 
		gap: 40px; 
	}
.cards-grid { 
		margin-top: -25px !important; 
	}

	.hero h1 { 
		font-size: 2.2rem; 
	}

	/* --- FOOTER --- */
	.footer-grid { 
		justify-content: center; 
		text-align: center; 
		flex-direction: column; 
		align-items: center; 
		gap: 30px; 
	}

	.social-links { 
		justify-content: center; 
	}

	.footer-col { 
		align-items: center; 
	}
select.advanced-form-control { 
		background-position: right 10px top 50%; 
		background-size: 8px auto; 
		padding-right: 30px; 
	}

	.advanced-form-control { 
		padding: 10px 12px !important; 
		font-size: 0.95rem !important; 
	}

	.advanced-form-label { 
		font-size: 0.85rem !important; 
		margin-left: 0 !important; 
		margin-bottom: 5px !important; 
	}
/* --- GUÍA DE FUENTES --- */
	.fuentes-main-container { 
		margin: -25px auto 40px !important; 
		padding: 0 15px; 
	}

	.fuentes-content-container { 
		flex-direction: column; 
		gap: 40px; 
	}

	.fuentes-right-column { 
		position: static; 
		max-height: none; 
		overflow-y: visible; 
		width: 100%; 
		min-height: auto; 
		display: block; 
	}

	.fuentes-hero { 
		padding: 40px 0 45px 0; 
	}

	.fuentes-hero h1 { 
		font-size: 2rem; 
	}

	.fuentes-left-column, 
	.fuentes-right-column { 
		padding: 20px; 
	}

	.fuentes-column-title, 
	.fuentes-index-title { 
		font-size: 1.1rem; 
	}

	.fuentes-index-table-container { 
		display: flex !important; 
		flex-wrap: wrap !important; 
		justify-content: center !important; 
		gap: 8px !important; 
		width: 100% !important; 
	}

	.fuentes-index-table-container div { 
		display: contents !important; 
	}

	.fuentes-alpha-item { 
		display: flex !important; 
		width: 42px !important; 
		height: 42px !important; 
		flex: none !important; 
		justify-content: center !important; 
		align-items: center !important; 
	}

	.fuentes-search-buttons { 
		flex-direction: column; 
	}

	.fuentes-search-buttons .btn-primary, 
	.fuentes-search-buttons .btn-secondary { 
		flex: none; 
		width: 100%; 
	}

	.scroll-to-top-btn { 
		bottom: 20px; 
		right: 20px; 
		width: 45px; 
		height: 45px; 
		font-size: 1.2rem; 
	}

	/* --- DICCIONARIOS --- */
	.diccionarios-grid { 
		grid-template-columns: 1fr; 
	}

	.diccionario-card .card-header { 
		min-height: auto; 
	}
	
	.btn-dicc {
		width: 100% !important; /* Sigue siendo flexible... */
		max-width: 350px !important; /* ...pero le ponemos un tope lógico para que no sea un chorizo */
		margin: 20px auto 10px auto !important; /* Lo empujamos al centro matemático de la tarjeta */
		display: block !important; /* Forzamos el bloque para que el margen 'auto' lo centre bien */
		padding: 12px 20px !important; /* Le damos una altura cómoda al tacto */
	}
/* --- BOTONES BUSCAR/LIMPIAR EN FUENTES (Lado a lado en 992px) --- */
	.fuentes-search-buttons { 
		display: flex !important;
		flex-direction: row !important; /* Los pone uno al lado del otro */
		gap: 15px !important; /* Espacio entre los botones */
		width: 100% !important;
		max-width: 600px !important; /* El mismo ancho intermedio que usamos en el catálogo */
		margin: 20px auto 0 auto !important; /* Centrado perfecto en la pantalla apaisada */
	}

	.fuentes-search-buttons .btn { 
		flex: 1 !important; /* Se dividen el espacio 50/50 automáticamente */
		padding: 10px 15px !important; /* Les sacamos lo "gordo" verticalmente */
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important; 
		gap: 8px !important;
	}
	
	.fuentes-search-buttons .btn i {
		margin: 0 !important; /* Centra el emoji perfecto */
	}
	
	
	/* --- BOTONES DE COMPARTIR Y GUARDAR EN MODALS: SOLO ICONO EN MÓVIL --- */
	.btn-share-link,
	.btn-guardar-busqueda {
		font-size: 0 !important; 
		color: transparent !important; 
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;
		align-self: center !important; 
		margin: 0 1px 0 0 !important;
		padding: 0 !important;
		position: relative !important; 
		display: inline-block !important; 
		border-radius: 6px !important;
		border: none !important;
	}

	.btn-share-link i,
	.btn-guardar-busqueda i {
		font-size: 1.1rem !important; 
		color: #2c3e50 !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important; 
		padding: 0 !important;
		line-height: 1 !important;
	}

	/* Para que el icono del botón 'Guardada' se vea bien en móvil */
	.btn-guardar-busqueda.ya-guardada i {
		color: white !important;
	}
	
	/* --- HEADER FIX MÓVIL --- */
	nav {
		margin: 0 !important; /* Resetea el margen que empujaba en desktop */
	}
	.mobile-toggle {
		display: block !important;
		margin-left: 0 !important; /* Ya no necesita empujar, ahora viaja agrupado */
	}
/* Dropdown en móvil: se comporta como acordeón dentro del menú desplegable */
    .nav-link.dropdown .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        background: #f8fafc;
        border-radius: 0;
        padding-left: 20px;
    }
    .nav-link.dropdown.open .dropdown-menu {
        display: block;
    }
    .dropdown-toggle {
        justify-content: space-between;
        width: 100%;
    }
	
}

/* =========================================
   13-14-18-19. RESPONSIVE — CELULARES MEDIANOS
   ========================================= */
@media (max-width: 768px) {

	/* --- NOTICIAS Y AYUDA --- */
	.noticias-hero { 
		padding: 40px 0; 
	}

	.noticias-hero h1 { 
		font-size: 2rem; 
	}

	.ayuda-cta-banner { 
		flex-direction: column; 
		text-align: center; 
		gap: 20px; 
	}

	.ayuda-cta-content { 
		flex-direction: column; 
		gap: 15px; 
	}

	.ayuda-cta-banner button { 
		width: 100%; 
	}

	.ayuda-hero { 
		padding: 40px 0; 
	}

	.ayuda-hero h1 { 
		font-size: 2rem; 
	}

	.ayuda-filtros-grid { 
		gap: 8px; 
	}

	.ayuda-chip-rect { 
		flex-grow: 1; 
		justify-content: center; 
		font-size: 0.85rem; 
		padding: 10px; 
	}

	/* --- AYUDA: CASILLEROS COMPACTADOS --- */
	.ayuda-card-acordeon {
		margin-bottom: 8px !important; 
	}

	.ayuda-card-pregunta { 
		align-items: flex-start;
		padding: 14px 18px !important; 
		font-size: 0.95rem !important; 
	}

	.ayuda-card-pregunta .arrow { 
		margin-top: 2px !important; 
	}

	.ayuda-card-respuesta {
		padding: 0 18px !important; /* Margen cerrado igual al abierto */
		font-size: 0.95rem !important;
	}
	.ayuda-card-acordeon.open .ayuda-card-respuesta {
		padding: 15px 18px !important;
	}

	/* --- DICCIONARIOS --- */
	.diccionarios-hero { 
		padding: 40px 0 80px 0; 
	}

	.diccionarios-hero h1 { 
		font-size: 2rem; 
	}

	.dicc-flex-row { 
		flex-direction: column; 
	}

	/* --- HOME: CARDS --- */
	.cards-grid { 
		grid-template-columns: 1fr; 
		gap: 15px; 
		margin-bottom: 40px; 
	}

	.card { 
		padding: 15px 20px; 
		flex-direction: column; 
		justify-content: center; 
	}

	.card-icon { 
		width: 50px; 
		height: 50px; 
		font-size: 1.4rem; 
		margin-bottom: 10px; 
	}

	.card h3 { 
		font-size: 1.1rem; 
		margin-bottom: 5px; 
	}

	.card p { 
		font-size: 0.9rem; 
		margin-bottom: 15px; 
		line-height: 1.4; 
	}

	.card .btn { 
		width: 100%; 
		padding: 10px; 
		font-size: 0.95rem; 
	}
/* --- BOTONES DE COMPARTIR Y GUARDAR EN MODALS: SOLO ICONO EN MÓVIL --- */
	.btn-share-link,
	.btn-guardar-busqueda {
		font-size: 0 !important; 
		color: transparent !important; 
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;
		align-self: center !important; 
		margin: 0 1px 0 0 !important;
		padding: 0 !important;
		position: relative !important; 
		display: inline-block !important; 
		border-radius: 6px !important;
		border: none !important;
	}

	.btn-share-link i,
	.btn-guardar-busqueda i {
		font-size: 1.1rem !important; 
		color: #2c3e50 !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important; 
		padding: 0 !important;
		line-height: 1 !important;
	}

	/* Para que el icono del botón 'Guardada' se vea bien en móvil */
	.btn-guardar-busqueda.ya-guardada i {
		color: white !important;
	}
	
	/* --- HEADER FIX MÓVIL --- */
	nav {
		margin: 0 !important; /* Resetea el margen que empujaba en desktop */
	}
	.mobile-toggle {
		display: block !important;
		margin-left: 0 !important; /* Ya no necesita empujar, ahora viaja agrupado */
	}
.texto-recurso-nacional {
        text-align: center;
    }
	
	.institucional-hero h1 { font-size: 2rem; }

    /* Ajustes Responsivos Móviles (Sección Institucional) */
    .inst-grid-2, .inst-grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .inst-span-2 {
        grid-column: span 1; /* En celulares, vuelve a ocupar 1 sola columna */
    }
    .inst-modern-card {
        padding: 25px;
    }
}

/* =========================================
   16-17-19. RESPONSIVE — PANTALLAS MUY PEQUEÑAS
   ========================================= */
@media (max-width: 480px) {

	/* --- HOME Y GENERAL --- */
	.hero h1 { 
		font-size: 1.8rem; 
	}

	.hero-subtitle { 
		font-size: 1rem; 
	}

	.cards-grid { 
		margin-top: -15px !important; 
	}

	.scroll-to-top-btn { 
		bottom: 15px; 
		right: 15px; 
		width: 40px; 
		height: 40px; 
		font-size: 1.1rem; 
	}

	/* --- AYUDA: MÁXIMA COMPACTACIÓN PARA CELULARES CHICOS --- */
	.ayuda-card-acordeon {
		margin-bottom: 6px !important;
	}

	.ayuda-card-pregunta { 
		padding: 12px 14px !important;
		font-size: 0.9rem !important;
	}
	
	.ayuda-card-respuesta {
		padding: 0 14px !important; /* Margen cerrado igual al abierto */
		font-size: 0.9rem !important;
	}
	.ayuda-card-acordeon.open .ayuda-card-respuesta {
		padding: 12px 14px !important;
	}
/* --- GUÍA DE FUENTES --- */
	.fuentes-main-container { 
		margin: -20px auto 30px !important; 
		padding: 0 8px !important;
	}

	.fuentes-hero { 
		padding: 35px 0 !important; 
	}

	.fuentes-hero h1 { 
		font-size: 1.8rem; 
	}

	.fuentes-option-note { 
		padding-left: 42px; 
		padding-top: 5px; 
		padding-bottom: 8px; 
		font-size: 0.8rem; 
	}

	.fuentes-alpha-grid, 
	.fuentes-alpha-grid-last { 
		display: flex !important; 
		flex-wrap: wrap !important; 
		justify-content: center !important; 
		gap: 8px !important; 
	}

	.fuentes-alpha-item { 
		height: 38px; 
		font-size: 0.95rem; 
		min-width: 40px; 
	}

	.fuentes-search-buttons { 
		flex-direction: column; 
	}

	.fuentes-search-buttons .btn-primary, 
	.fuentes-search-buttons .btn-secondary { 
		flex: none; 
		width: 100%; 
	}
	
	.diccionarios-main-container { 
		padding: 0 8px !important; 
	}
	
	.diccionarios-hero { /* OJO: Cambiá este nombre por la clase exacta de tu banner */
		/* Igualamos el espaciado al del Catálogo: 30px arriba, 45px abajo */
		padding: 30px 0 45px 0 !important; 
		min-height: auto !important; /* Mata cualquier altura fija exagerada que venga de la PC */
	}
	
	/* --- BOTONES DE COMPARTIR EN MODALS: SOLO ICONO EN MÓVIL --- */
	.btn-share-link {
		font-size: 0 !important; 
		color: transparent !important; 
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;
		align-self: center !important; 
		margin: 0 1px 0 0 !important;
		padding: 0 !important;
		position: relative !important; 
		display: inline-block !important; 
		border-radius: 6px !important;
		border: none !important;
	}

	.btn-share-link i {
		font-size: 1.1rem !important; 
		color: #2c3e50 !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important; 
		padding: 0 !important;
		line-height: 1 !important;
	}

/* --- MODAL DE FUENTES (MÓVIL): FIX DE BARRAS DINÁMICAS (100dvh) --- */
	
	div#fuentes-modal {
		padding: 0 !important; 
		align-items: flex-start !important; 
		height: 100% !important; 
		height: 100dvh !important; 
	}
/* --- NOTIFICACIÓN TOAST (CARTEL DE COPIADO) EN MÓVIL --- */
	.toast-notification {
		background-color: #333333 !important; 
		color: #ffffff !important;
		border-radius: 50px !important; 
		box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
		white-space: nowrap !important; 
		width: max-content !important; 
		max-width: 90vw !important;
		padding: 12px 25px !important;
		font-size: 0.95rem !important;
		text-align: center !important;
		z-index: 999999 !important; 
	}

	.toast-notification i {
		vertical-align: middle !important;
		margin: 0 8px 0 0 !important;
		font-size: 1.1rem !important;
	}

	
	/* --- BOTONES DE COMPARTIR Y GUARDAR EN MODALS: SOLO ICONO EN MÓVIL --- */
	.btn-share-link,
	.btn-guardar-busqueda {
		font-size: 0 !important; 
		color: transparent !important; 
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;
		align-self: center !important; 
		margin: 0 1px 0 0 !important;
		padding: 0 !important;
		position: relative !important; 
		display: inline-block !important; 
		border-radius: 6px !important;
		border: none !important;
	}

	.btn-share-link i,
	.btn-guardar-busqueda i {
		font-size: 1.1rem !important; 
		color: #2c3e50 !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important; 
		padding: 0 !important;
		line-height: 1 !important;
	}

	/* Para que el icono del botón 'Guardada' se vea bien en móvil */
	.btn-guardar-busqueda.ya-guardada i {
		color: white !important;
	}
	
	/* --- HEADER FIX MÓVIL --- */
	nav {
		margin: 0 !important; /* Resetea el margen que empujaba en desktop */
	}
	.mobile-toggle {
		display: block !important;
		margin-left: 0 !important; /* Ya no necesita empujar, ahora viaja agrupado */
	}
.institucional-hero h1 { font-size: 1.8rem; }
}

/* =========================================
   CLASES GLOBALES COMPLEMENTARIAS
   ========================================= */
.advanced-form-control::placeholder { 
	color: #adb5bd; 
	font-weight: 300; 
	opacity: 1; 
}

.footer-mapa-link { 
	font-weight: 700 !important; 
	font-size: 1rem !important; 
}

/* =========================================
   MENÚ DESPLEGABLE "PRODUCTOS" (SUTIL Y ANIMADO)
   ========================================= */
.nav-link.dropdown {
    position: relative;
    padding: 0 !important; 
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px 15px;
    font-weight: 500;
    color: var(--secondary);
    border-radius: 4px;
    transition: 0.2s;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    color: var(--primary);
    background-color: rgba(0, 114, 187, 0.05);
    outline: none;
}

.dropdown-toggle i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.nav-link.dropdown:hover .dropdown-toggle i,
.nav-link.dropdown.open .dropdown-toggle i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-radius: 6px;
    min-width: 240px;
    padding: 8px 0;
    z-index: 1000;
    list-style: none;
    
    /* LA MAGIA DE LA ANIMACIÓN */
    display: block !important; /* Forzamos bloque para que la animación funcione */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); /* Empieza un poco más abajo */
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.3s;
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: var(--secondary);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
    background: #f4f6f8;
    color: var(--primary);
}

.dropdown-menu li a i:first-child {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.dropdown-menu li a .fa-external-link-alt {
    font-size: 0.7rem;
    margin-left: auto;
    opacity: 0.6;
}

/* --- LÓGICA DE APARICIÓN PARA ESCRITORIO --- */
@media (min-width: 993px) {
    .nav-link.dropdown:hover .dropdown-menu,
    .nav-link.dropdown:focus-within .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* Clase que inyecta el JS para forzar el cierre tras hacer clic */
    .nav-link.dropdown.force-close .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(15px) !important;
        pointer-events: none !important;
    }
}

/* --- LÓGICA DE ACORDEÓN ANIMADO PARA MÓVILES --- */
@media (max-width: 992px) {
    .nav-link.dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: #f8fafc;
        border-radius: 0;
        padding-left: 20px;
        
        /* Animación del acordeón vertical */
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        transform: none; 
        transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, visibility 0.4s ease;
    }
    
    .nav-link.dropdown.open .dropdown-menu {
        max-height: 400px;
        opacity: 1;
        visibility: visible;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    
    .dropdown-toggle {
        justify-content: space-between;
        width: 100%;
    }
}

/* Fix for hero autocomplete */
.semantic-hero-search-box { position: relative; }
.sugerencias-hero-lista { top: calc(100% + 10px) !important; left: 0 !important; width: 100% !important; z-index: 9999 !important; border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important; }

/* Home compacto: accesos principales */
.hero {
	padding-top: 42px;
	padding-bottom: 76px;
}

.semantic-hero-search {
	margin-top: 28px;
}

.cards-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: -26px;
	gap: 16px;
}

.cards-grid > .home-main-card {
	position: relative;
	overflow: hidden;
	flex: 1 1 200px;
	max-width: 216px;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	min-height: 292px;
	padding: 34px 20px 28px;
	border-top-width: 3px;
	box-shadow: 0 6px 18px rgba(31, 41, 55, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cards-grid > .home-main-card:nth-child(1) {
	background: linear-gradient(145deg, #ffffff 0%, #f0fbf3 100%);
	border-top-color: rgba(46, 125, 50, 0.28);
}

.cards-grid > .home-main-card:nth-child(2) {
	background: linear-gradient(145deg, #ffffff 0%, #eef9ff 100%);
	border-top-color: rgba(0, 114, 187, 0.32);
}

/* [V54] Inteligencia Bibliográfica */
.cards-grid > .home-main-card:nth-child(3) {
	background: linear-gradient(145deg, #ffffff 0%, #fff1f2 100%);
	border-top-color: rgba(225, 29, 72, 0.45);
	border-top-width: 4px;
}

.cards-grid > .home-main-card:nth-child(4) {
	background: linear-gradient(145deg, #ffffff 0%, #fff8df 100%);
	border-top-color: rgba(253, 185, 19, 0.42);
}

.cards-grid > .home-main-card:nth-child(5) {
	background: linear-gradient(145deg, #ffffff 0%, #f5f0ff 100%) !important;
	border-top-color: rgba(124, 58, 237, 0.28) !important;
}

.cards-grid > .home-main-card:nth-child(6) {
	background: linear-gradient(145deg, #ffffff 0%, #fff7ed 100%);
	border-top-color: rgba(249, 115, 22, 0.28);
}

.cards-grid > .home-main-card:not(.home-main-card-disabled):hover,
.cards-grid > .home-main-card:not(.home-main-card-disabled):focus-visible {
	transform: translateY(-5px);
	outline: none;
}

.cards-grid > .home-main-card:not(.home-main-card-disabled):active {
	transform: translateY(-1px);
}

.cards-grid > .home-main-card:nth-child(1):hover,
.cards-grid > .home-main-card:nth-child(1):focus-visible {
	background: linear-gradient(145deg, #ffffff 0%, #ddf7e4 100%) !important;
	border-top-color: rgba(46, 125, 50, 0.58);
	box-shadow: 0 12px 26px rgba(46, 125, 50, 0.13);
}

.cards-grid > .home-main-card:nth-child(2):hover,
.cards-grid > .home-main-card:nth-child(2):focus-visible {
	background: linear-gradient(145deg, #ffffff 0%, #dff4ff 100%) !important;
	border-top-color: rgba(0, 114, 187, 0.72);
	box-shadow: 0 12px 26px rgba(0, 114, 187, 0.16);
}

/* [V54] Inteligencia Bibliográfica hover */
.cards-grid > .home-main-card:nth-child(3):hover,
.cards-grid > .home-main-card:nth-child(3):focus-visible {
	background: linear-gradient(145deg, #ffffff 0%, #ffe4e6 100%) !important;
	border-top-color: rgba(225, 29, 72, 0.75);
	box-shadow: 0 12px 26px rgba(225, 29, 72, 0.15);
}

.cards-grid > .home-main-card:nth-child(4):hover,
.cards-grid > .home-main-card:nth-child(4):focus-visible {
	background: linear-gradient(145deg, #ffffff 0%, #fff0bd 100%) !important;
	border-top-color: rgba(253, 185, 19, 0.85);
	box-shadow: 0 12px 26px rgba(253, 185, 19, 0.16);
}

.cards-grid > .home-main-card:nth-child(5):hover,
.cards-grid > .home-main-card:nth-child(5):focus-visible {
	background: linear-gradient(145deg, #ffffff 0%, #eee2ff 100%) !important;
	border-top-color: rgba(124, 58, 237, 0.58);
	box-shadow: 0 12px 26px rgba(124, 58, 237, 0.13);
}

.cards-grid > .home-main-card:nth-child(6):hover,
.cards-grid > .home-main-card:nth-child(6):focus-visible {
	background: linear-gradient(145deg, #ffffff 0%, #ffedd5 100%) !important;
	border-top-color: rgba(249, 115, 22, 0.62);
	box-shadow: 0 12px 26px rgba(249, 115, 22, 0.14);
}

.cards-grid > .home-main-card .card-icon {
	position: absolute;
	right: -46px;
	bottom: -56px;
	width: 184px;
	height: 184px;
	margin: 0;
	border-radius: 50%;
	font-size: 6.15rem;
	opacity: 0.11;
	transform: translate(0, 0) rotate(-10deg);
	pointer-events: none;
	z-index: 0;
	transition: opacity 0.26s ease, transform 0.26s ease;
}

.cards-grid > .home-main-card:not(.home-main-card-disabled):hover .card-icon,
.cards-grid > .home-main-card:not(.home-main-card-disabled):focus-visible .card-icon {
	opacity: 0.2;
	transform: translate(-3px, -2px) rotate(-8deg) scale(1.015);
}

.cards-grid > .home-main-card h3,
.cards-grid > .home-main-card p,
.cards-grid > .home-main-card .home-card-action {
	position: relative;
	z-index: 1;
}

.cards-grid > .home-main-card h3 {
	max-width: 100%;
	margin-bottom: 24px;
	font-size: 1.14rem;
	line-height: 1.34;
	min-height: 3.05em;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	width: 100%;
}

.cards-grid > .home-main-card h3::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -12px;
	width: calc(100vw / 5 - 82px);
	max-width: calc(100% + 38px);
	min-width: 154px;
	height: 1px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent 0%, rgba(0, 114, 187, 0.36) 16%, rgba(0, 114, 187, 0.36) 84%, transparent 100%);
	transform: translateX(-50%);
}

.cards-grid > .home-main-card h3::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -15px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(0, 114, 187, 0.54);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.72);
	transform: translateX(-50%);
	z-index: 1;
}

.cards-grid > .home-main-card:nth-child(1) h3::after {
	background: linear-gradient(90deg, transparent 0%, rgba(46, 125, 50, 0.34) 16%, rgba(46, 125, 50, 0.34) 84%, transparent 100%);
}

.cards-grid > .home-main-card:nth-child(1) h3::before {
	background: rgba(46, 125, 50, 0.52);
}

/* [V54] Inteligencia Bibliográfica h3 decorator */
.cards-grid > .home-main-card:nth-child(3) h3::after {
	background: linear-gradient(90deg, transparent 0%, rgba(225, 29, 72, 0.34) 16%, rgba(225, 29, 72, 0.34) 84%, transparent 100%);
}

.cards-grid > .home-main-card:nth-child(3) h3::before {
	background: rgba(225, 29, 72, 0.52);
}

.cards-grid > .home-main-card:nth-child(4) h3::after {
	background: linear-gradient(90deg, transparent 0%, rgba(214, 151, 0, 0.42) 16%, rgba(214, 151, 0, 0.42) 84%, transparent 100%);
}

.cards-grid > .home-main-card:nth-child(4) h3::before {
	background: rgba(214, 151, 0, 0.58);
}

.cards-grid > .home-main-card:nth-child(5) h3::after {
	background: linear-gradient(90deg, transparent 0%, rgba(134, 142, 150, 0.28) 16%, rgba(134, 142, 150, 0.28) 84%, transparent 100%);
}

.cards-grid > .home-main-card:nth-child(5) h3::before {
	background: rgba(134, 142, 150, 0.44);
}

.cards-grid > .home-main-card:nth-child(6) h3::after {
	background: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.34) 16%, rgba(249, 115, 22, 0.34) 84%, transparent 100%);
}

.cards-grid > .home-main-card:nth-child(6) h3::before {
	background: rgba(249, 115, 22, 0.52);
}

.cards-grid > .home-main-card p {
	max-width: 168px;
	margin-bottom: 22px;
	font-size: 0.94rem;
	line-height: 1.5;
	flex-grow: 1;
}

.cards-grid > .home-main-card .home-card-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 136px;
	min-height: 34px;
	margin-top: auto;
	padding: 7px 18px;
	border-radius: 5px;
	border: 1px solid rgba(0, 114, 187, 0.42);
	background: rgba(255, 255, 255, 0.62);
	color: var(--primary);
	font-family: 'Roboto', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cards-grid > .home-main-card .home-card-action i {
	font-size: 0.72rem;
	opacity: 0.72;
}

.cards-grid > .home-main-card:nth-child(1) .home-card-action {
	border-color: rgba(46, 125, 50, 0.42);
	color: #2e7d32;
}

.cards-grid > .home-main-card:nth-child(2) .home-card-action {
	border-color: rgba(0, 114, 187, 0.42);
	color: var(--primary);
}

/* [V54] Inteligencia Bibliográfica action */
.cards-grid > .home-main-card:nth-child(3) .home-card-action {
	border-color: rgba(225, 29, 72, 0.42);
	color: #e11d48;
}

.cards-grid > .home-main-card:nth-child(4) .home-card-action {
	border-color: rgba(214, 151, 0, 0.46);
	color: #956600;
}

.cards-grid > .home-main-card:nth-child(6) .home-card-action {
	border-color: rgba(249, 115, 22, 0.42);
	color: #f97316;
}

.cards-grid > .home-main-card:not(.home-main-card-disabled):hover .home-card-action,
.cards-grid > .home-main-card:not(.home-main-card-disabled):focus-visible .home-card-action {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 114, 187, 0.2);
}

.cards-grid > .home-main-card:nth-child(1):hover .home-card-action,
.cards-grid > .home-main-card:nth-child(1):focus-visible .home-card-action {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
	box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

/* [V54] Inteligencia Bibliográfica action hover */
.cards-grid > .home-main-card:nth-child(3):hover .home-card-action,
.cards-grid > .home-main-card:nth-child(3):focus-visible .home-card-action {
	background: #e11d48;
	border-color: #e11d48;
	color: #fff;
	box-shadow: 0 4px 12px rgba(225, 29, 72, 0.22);
}

.cards-grid > .home-main-card:nth-child(4):hover .home-card-action,
.cards-grid > .home-main-card:nth-child(4):focus-visible .home-card-action {
	background: #956600;
	border-color: #956600;
	color: #fff;
	box-shadow: 0 4px 12px rgba(214, 151, 0, 0.2);
}

.cards-grid > .home-main-card:nth-child(6):hover .home-card-action,
.cards-grid > .home-main-card:nth-child(6):focus-visible .home-card-action {
	background: #f97316;
	border-color: #f97316;
	color: #fff;
	box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

.cards-grid > .home-main-card .home-card-action-disabled {
	background: #e9ecef;
	border-color: #dee2e6;
	color: #868e96;
	box-shadow: none;
}

.cards-grid > .home-main-card-disabled:hover {
	transform: none;
	background: linear-gradient(145deg, #ffffff 0%, #f3f5f7 100%) !important;
	box-shadow: none;
	border-top-color: rgba(134, 142, 150, 0.24) !important;
}

@media (max-width: 768px) {
	.cards-grid > .home-main-card {
		min-height: 176px;
		padding: 18px 16px 16px;
		max-width: 100%;
		flex: 1 1 100%;
	}

	.cards-grid > .home-main-card h3,
	.cards-grid > .home-main-card p {
		max-width: min(100%, 280px);
	}

	.cards-grid > .home-main-card h3 {
		min-height: 2.45em;
		margin-bottom: 16px;
		font-size: 1rem;
		line-height: 1.26;
	}

	.cards-grid > .home-main-card p {
		margin-bottom: 12px;
		font-size: 0.84rem;
		line-height: 1.34;
	}

	.cards-grid > .home-main-card h3::after {
		width: min(68vw, 236px);
		max-width: none;
		min-width: 0;
		bottom: 2px;
	}
	.cards-grid > .home-main-card h3::before {
		bottom: -1px;
	}

	.cards-grid > .home-main-card .card-icon {
		right: -28px;
		bottom: -38px;
		width: 118px;
		height: 118px;
		font-size: 3.85rem;
		opacity: 0.09;
	}

	.cards-grid > .home-main-card .home-card-action {
		min-width: 112px;
		min-height: 28px;
		padding: 4px 12px;
		font-size: 0.74rem;
	}
}

@media (max-width: 480px) {
	.cards-grid > .home-main-card {
		min-height: 164px;
		padding: 16px 15px 15px;
	}

	.cards-grid > .home-main-card h3 {
		margin-bottom: 14px;
		font-size: 0.96rem;
	}

	.cards-grid > .home-main-card p {
		max-width: min(100%, 250px);
		font-size: 0.82rem;
		line-height: 1.32;
	}

	.cards-grid > .home-main-card h3::after {
		width: min(64vw, 204px);
		bottom: 2px;
	}
	.cards-grid > .home-main-card h3::before {
		bottom: -1px;
	}

	.cards-grid > .home-main-card .card-icon {
		right: -24px;
		bottom: -34px;
		width: 104px;
		height: 104px;
		font-size: 3.35rem;
	}
}

@media (max-width: 768px) {
	.hero {
		padding-top: 30px;
		padding-bottom: 56px;
	}

	.semantic-hero-search {
		margin-top: 20px;
	}

	.cards-grid {
		margin-top: -18px;
	}
}

@media (max-width: 480px) {
	.hero {
		padding-top: 24px;
		padding-bottom: 48px;
	}

	.hero h1 {
		margin-bottom: 6px;
		padding-bottom: 10px;
	}

	.hero-subtitle {
		margin-top: 2px;
	}

	.semantic-hero-search {
		margin-top: 16px;
	}

	.cards-grid {
		margin-top: -14px;
	}
}


/* Fixes from UI Tweaks V6 */
.semantic-search-btn { height: 48px; width: 48px; border: none; border-radius: 8px; background: var(--accent); color: #232d4f; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; flex-shrink: 0; }
.semantic-search-btn:hover { background: #ffc73f; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253, 185, 19, 0.2); }
.semantic-search-clear-btn { background: transparent; border: none; color: #a0aec0; font-size: 1rem; cursor: pointer; padding: 0 8px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
.semantic-search-clear-btn:hover { color: #e53e3e; }
.semantic-search-divider { width: 1px; height: 24px; background: #e2e8f0; margin: 0 4px; flex-shrink: 0; }
@media (max-width: 768px) { .semantic-search-btn { width: 44px; height: 44px; } }
@media (max-width: 768px) {
}

/* =========================================
   COMPARTIR BUSQUEDA EN MODAL PARENT
   ========================================= */
.modal-share-btn {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.25rem;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s, color 0.2s;
    display: block; /* Siempre visible (o siempre si preferimos) */
}
.modal-share-btn:hover {
    opacity: 1;
    color: var(--white);
}
.modal-share-btn.ya-guardado {
    color: #48bb78;
}
.modal-share-btn.ya-guardado:hover {
    color: #38a169;
}
.header-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    display: block;
}

.semantic-catalog-modal-content.modal-fullscreen {
    width: 96vw !important;
    height: 96vh !important;
    max-height: 96vh !important;
    max-width: 96vw !important;
    margin: auto !important;
}
.semantic-catalog-modal-content.modal-fullscreen .semantic-catalog-frame {
    flex: 1 !important;
    height: calc(100% - 58px) !important;
    min-height: 0 !important;
}

.driver-popover-inti {
    background-color: #ffffff;
    color: #334155;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 10px 30px -4px rgba(0,0,0,0.15);
    max-width: 340px;
    padding: 20px 20px 0;
    border: 1px solid rgba(0,0,0,0.04);
}
.driver-popover-inti .driver-popover-title {
    color: #1e3a5f;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-right: 32px;
    margin: 0 0 8px 0;
    line-height: 1.4;
}
.driver-popover-inti .tour-step-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
}
.driver-popover-inti .tour-step-icon i {
    font-size: 0.8rem;
}
.driver-popover-inti .driver-popover-description {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0;
    padding-right: 6px;
}
.driver-popover-inti .driver-popover-description i {
    color: #fbbf24;
}
.driver-popover-inti .driver-popover-close-btn {
    position: absolute;
    z-index: 999999;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: all 0.15s ease;
}
.driver-popover-inti .driver-popover-close-btn:hover {
    color: #0f172a;
    background: #e2e8f0;
    border-color: #94a3b8;
}
.driver-popover-inti .driver-popover-footer {
    margin-top: 12px;
    padding-top: 10px;
    padding-bottom: 18px;
    border-top: 1px solid #dce1e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #eef2f6;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0 0 12px 12px;
}
.driver-popover-inti .driver-popover-progress-text {
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    background: transparent;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.driver-popover-inti .driver-popover-navigation-btns {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}
.driver-popover-inti .driver-popover-navigation-btns button {
    display: inline-block;
    box-sizing: border-box;
    background: #ffffff;
    color: #1e3a5f;
    border: 1.5px solid #d1d9e6;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.4;
    text-shadow: none;
    outline: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.driver-popover-inti .driver-popover-navigation-btns button:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.driver-popover-inti .driver-popover-arrow {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}
.driver-popover-inti .fas,
.driver-popover-inti .far,
.driver-popover-inti .fab {
    font-family: "Font Awesome 7 Free" !important;
}
.driver-popover-inti .fas {
    font-weight: 900 !important;
}
.driver-popover-inti .far {
    font-weight: 400 !important;
}
#btn-iniciar-tour:hover {
    background-color: rgba(0,0,0,0.06);
}
#btn-iniciar-tour i {
    transition: transform 0.3s ease;
}
#btn-iniciar-tour:hover i {
    transform: rotate(-15deg);
}
.tour-badge:hover {
    background-color: #fbbf24 !important;
}

/* ========================================= */
/*   NUEVA SECCION DE AYUDA VISUAL (V25)     */
/* ========================================= */

.ayuda-grid-visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px 24px;
    margin-top: 20px;
}
.ayuda-grid-visual > .ayuda-card-moderna {
    flex: 0 1 calc((100% - 48px) / 3);
    width: 100%;
}

.ayuda-card-moderna {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    border: 1px solid #cbd5e1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: ayudaCardIn 0.3s ease forwards;
}

.ayuda-card-moderna:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.06);
}

.ayuda-card-header {
    padding: 20px 20px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ayuda-card-icon {
    background: #f0f4f8;
    color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}


/* CODIFICACION DE COLORES V26 */

.ayuda-card-moderna[data-categoria="basico"] .ayuda-card-icon { color: #fff; background-color: var(--primary); }
.ayuda-card-moderna[data-categoria="avanzado"] .ayuda-card-icon { color: #fff; background-color: #4f46e5; }
.ayuda-card-moderna[data-categoria="colecciones"] .ayuda-card-icon { color: #fff; background-color: #047857; }
.ayuda-card-moderna[data-categoria="herramientas"] .ayuda-card-icon { color: #fff; background-color: #b7791f; }
.ayuda-card-moderna[data-categoria="diccionarios"] .ayuda-card-icon { color: #fff; background-color: #8b5cf6; }


/* Remove old color coding block */
.ayuda-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #1e293b;
    font-weight: 600;
    line-height: 1.3;
}

.ayuda-card-body {
    padding: 0 20px 20px;
    flex-grow: 1;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
    /* flex column + el video con margin-top:auto (ver .ayuda-video-trigger)
       es lo que alinea el botón de video entre tarjetas: antes .ayuda-card-body
       era un bloque normal y el video solo tenía un margin-top fijo de 10px
       después del párrafo, así que su posición vertical dependía de cuánto
       texto tuviera CADA tarjeta — con descripciones de distinto largo, los
       videos quedaban a distinta altura entre columnas de la misma fila. */
    display: flex;
    flex-direction: column;
}

.ayuda-video-trigger {
    width: 100%;
    min-height: 132px;
    margin-top: auto;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 6px;
    background:
        radial-gradient(circle at 18% 18%, rgba(253,185,19,0.24), transparent 28%),
        linear-gradient(135deg, #0f2438 0%, #173d5c 52%, #0b1724 100%);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    text-align: left;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.ayuda-video-trigger::after {
    content: "";
    position: absolute;
    inset: auto 12px 12px 12px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.3));
    opacity: 0.85;
}

.ayuda-video-trigger:hover,
.ayuda-video-trigger:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16);
    outline: none;
}

.ayuda-video-trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(253,185,19,0.35), 0 8px 16px rgba(15, 23, 42, 0.16);
}

.ayuda-video-play {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: #102030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex: 0 0 auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.ayuda-video-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.ayuda-video-copy strong {
    font-size: 0.98rem;
    letter-spacing: 0.01em;
}

.ayuda-video-copy small {
    color: rgba(255,255,255,0.78);
    font-size: 0.78rem;
}

.ayuda-card-body p {
    margin-bottom: 15px;
}

.ayuda-media-placeholder {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.85rem;
    gap: 8px;
}

.ayuda-media-placeholder i {
    font-size: 2rem;
    color: #94a3b8;
}



.ayuda-card-footer .btn {
    padding: 0 !important;
    font-size: 0.78rem !important;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none !important;
    background-color: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}

.ayuda-card-footer .btn:hover {
    background-color: transparent !important;
    /* color will be handled by color-coding */
}

.ayuda-card-footer .btn i {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.ayuda-card-footer .btn:hover i {
    transform: scale(1.05);
}

.ayuda-card-footer .btn:hover i {
    background-color: var(--primary);
    color: #fff;
    transform: scale(1.05);
}

/* SIMULADOR VENN BOOLEANO */
.venn-simulator {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    text-align: center;
}

.venn-controls {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 15px;
}

.venn-btn {
    background: #fff;
    border: 1px solid #cbd5e1;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.venn-btn:hover {
    background: #e2e8f0;
}

.venn-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


.venn-diagram {
    position: relative;
    width: 150px;
    height: 100px;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
}
.venn-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease;
    border: none;
    mix-blend-mode: normal;
}
.venn-left { left: 5px; z-index: 1; }
.venn-right { right: 5px; z-index: 1; }
.venn-intersection {
    position: absolute;
    width: 44px;
    height: 76px;
    left: 53px;
    top: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
}

/* Modos del Venn */
.venn-and .venn-left { background: rgba(59, 130, 246, 0.15); color: #94a3b8; }
.venn-and .venn-right { background: rgba(59, 130, 246, 0.15); color: #94a3b8; }
.venn-and .venn-intersection { background: rgba(59, 130, 246, 0.9); opacity: 1; }

.venn-or .venn-left { background: rgba(16, 185, 129, 0.7); }
.venn-or .venn-right { background: rgba(16, 185, 129, 0.7); }
.venn-or .venn-intersection { opacity: 0; }

.venn-not .venn-left { background: rgba(59, 130, 246, 0.8); z-index: 2; }
.venn-not .venn-right { background: transparent; border: 2px dashed #ef4444; color: #ef4444; }
.venn-not .venn-intersection { opacity: 0; }

.venn-explanation {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.85rem;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

.ayuda-grid-visual .ayuda-separador {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Modal de Imagen Zoom */
.image-zoom-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.image-zoom-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}

.image-zoom-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.image-zoom-close:hover,
.image-zoom-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@keyframes zoomIn {
    from {transform: scale(0.9); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.ayuda-gif-zoom {
    transition: transform 0.2s, box-shadow 0.2s;
}
.ayuda-gif-zoom:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Fix para recortes visuales de Driver.js en elementos con overflow o margenes negativos */
:not(body):has(> .driver-active-element.cards-grid),
:not(body):has(> .driver-active-element.side-panel-tab) {
    overflow: visible !important;
}

/* Acordeón Híbrido en Tarjetas de Ayuda */
.ayuda-card-detalles {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    background-color: #f8fafc;
    border-top: 1px solid transparent;
}
.ayuda-card-detalles.open {
    border-top-color: #e2e8f0;
}
.ayuda-card-detalles-inner {
    padding: 20px;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
}
.ayuda-card-detalles-inner p:last-child,
.ayuda-card-detalles-inner ul:last-child,
.ayuda-card-detalles-inner ol:last-child {
    margin-bottom: 0;
}
.ayuda-card-detalles-inner ul.ayuda-lista-vineta {
    padding-left: 20px;
    margin-top: 10px;
}
.ayuda-card-detalles-inner ul.ayuda-lista-vineta li {
    margin-bottom: 8px;
}


.toggle-detalles-btn:hover {
    background-color: transparent !important;
}
.toggle-detalles-btn.open {
    background-color: transparent !important;
}
.toggle-detalles-btn i {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}
.toggle-detalles-btn:hover i {
    transform: scale(1.05);
}
.toggle-detalles-btn.open i {
    transform: rotate(180deg);
}

/* --- NUEVO REDISEÑO INSTITUCIONAL --- */
.institucional-hero.modern-hero {
    background: url('../imagenes/biblioteca_hero_modern.png') center center / cover no-repeat fixed;
    position: relative;
    padding: 80px 0 100px 0;
    color: white;
    text-align: center;
    border-bottom: 5px solid var(--primary);
}
.institucional-hero.modern-hero .hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(15,23,42,0.85), rgba(15,23,42,0.6));
    z-index: 1;
}
.institucional-hero.modern-hero .hero-content {
    position: relative;
    z-index: 2;
}

/* Tabs */
.inst-tabs-container {
    padding: 0 !important;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 6px;
}
.inst-tabs-header {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.inst-tab-btn {
    flex: 1;
    padding: 15px 20px;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}
.inst-tab-btn:hover {
    color: var(--primary);
    background: #f1f5f9;
}
.inst-tab-btn.active {
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
    background: #fff;
}
.inst-tabs-body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.inst-tab-content {
    grid-area: 1 / 1;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.inst-tab-content.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Info & Mapa */
.inst-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .inst-info-grid {
        grid-template-columns: 1fr;
    }
}
.inst-info-mapa iframe {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* Hover Cards Servicios */
.inst-service-card.hover-mode {
    perspective: 1000px;
    background: transparent;
    padding: 0;
    box-shadow: none;
    height: 220px;
    border: none;
}
.inst-service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 220px;
    text-align: center;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.inst-service-card.hover-mode:hover .inst-service-card-inner {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.inst-service-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.inst-service-card-front .inst-service-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.inst-service-card-front h4 {
    margin: 0;
    font-size: 1.15rem;
    color: #1e293b;
}

.inst-service-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 25px;
    background-color: var(--primary);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(101%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.inst-service-card.hover-mode:hover .inst-service-card-back {
    transform: translateY(0);
}
.inst-service-card-back p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #f1f5f9;
}


/* ========================================= */
/*   V26 - REFINAMIENTO UX/UI DE AYUDA       */
/* ========================================= */

.ayuda-destacada {
    animation: ayudaPulse 1.5s ease;
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(0, 114, 187, 0.3) !important;
}

@keyframes ayudaPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 114, 187, 0); }
    50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(0, 114, 187, 0.4); }
    100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 114, 187, 0.3); }
}

@keyframes ayudaCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ayuda-card-moderna {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    border: 1px solid #cbd5e1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: ayudaCardIn 0.3s ease forwards;
}

.ayuda-demo-gif {
    aspect-ratio: 16/9;
    width: 100%;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.ayuda-gif-zoom {
    cursor: zoom-in;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ayuda-gif-zoom:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.ayuda-grid-visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px 24px;
    margin-top: 20px;
}

/* POPOVER INFO */
.ayuda-info-popover {
    position: absolute;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    z-index: 10000;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    max-width: 360px;
}

.ayuda-info-popover.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ayuda-info-popover-head {
    background: #f8fafc;
    padding: 10px 15px;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.ayuda-info-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
}

.ayuda-info-close:hover {
    color: #ef4444;
}

.ayuda-info-popover-body {
    padding: 15px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.ayuda-info-popover-body p:last-child {
    margin-bottom: 0;
}

.ayuda-mini-tip {
    background: #fefce8;
    border-left: 3px solid #facc15;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #854d0e;
    margin-top: 10px;
    border-radius: 0 4px 4px 0;
}


.page-section:has(.ayuda-grid-visual) .container { max-width: 1060px; }


.ayuda-card-footer {
    padding: 15px 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    background: #fff;
}
.ayuda-card-footer .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}



@media (max-width: 980px) {
    .ayuda-grid-visual > .ayuda-card-moderna {
        flex: 0 1 calc((100% - 24px) / 2);
    }
}
@media (max-width: 640px) {
    .ayuda-grid-visual > .ayuda-card-moderna {
        flex: 0 1 100%;
    }
}


.toggle-detalles-btn {
    min-width: 70px;
    justify-content: center;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    background-color: transparent !important;
    color: var(--primary) !important;
    opacity: 0.8;
}
.toggle-detalles-btn:hover, .toggle-detalles-btn.open {
    background-color: rgba(0, 114, 187, 0.08) !important;
    opacity: 1;
}


/* MENSAJES (Importados desde Fuentes) */
.message {
    padding: 30px;
    border-radius: 12px;
    margin: 20px 0;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.message i { 
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.9;
    display: inline-block;
}
.message h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    font-weight: 600;
}
.message-warning {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    color: #2b6cb0;
}
.message-warning i { color: #3182ce; }

.cards-grid > .home-main-card:nth-child(5) .home-card-action {
	border-color: rgba(124, 58, 237, 0.42);
	color: #7c3aed;
}

.cards-grid > .home-main-card:nth-child(5):not(.home-main-card-disabled):hover .home-card-action,
.cards-grid > .home-main-card:nth-child(5):not(.home-main-card-disabled):focus-visible .home-card-action {
	background: #7c3aed;
	border-color: #7c3aed;
	color: #fff;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.skip-link {
    position: absolute;
    top: -48px;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 10px 18px;
    z-index: 99999;
    border-radius: 0 0 6px 0;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    /* Scale down secondary content */
    .recursos-nacionales-grid { gap: 12px; }
    .recurso-nacional-link { padding: 12px 16px; gap: 12px; }
    .recurso-nacional-link .recurso-icon { font-size: 1.15rem; }
    .recurso-nacional-link .texto-recurso-nacional { font-size: 0.85rem; }
    
    .horarios-box { padding: 12px 16px; font-size: 0.9rem; }
    .horarios-desc { font-size: 0.85rem; margin-bottom: 12px; }
    .info-block h3, .home-section-title { font-size: 1.15rem; margin-bottom: 15px; }
    
    .header-actions { gap: 4px; }
    
    .contact-list li { gap: 10px; margin-bottom: 12px; font-size: 0.9rem; }
    .contact-list i { font-size: 1rem; min-width: 20px; }
    
    /* Noticias/Novedades */
    .novedad-card { padding: 16px; }
}