/* =========================================
   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 */

	/* 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: #fdfbf7;     /* 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: scroll; 
}

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;
	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: 1200px; 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; }
.btn-primary:hover { background-color: var(--primary-dark); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

.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; 
}

.section-title-unified {
	border-bottom: 2px solid var(--accent);
	display: inline-block;
	padding-bottom: 5px;
	margin-bottom: 30px;
}

.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: 0 2px 8px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; }

.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-weight: 300; font-size: 1.3rem; }

.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: #000000; 
	border: none;
	z-index: 999; 
}

.top-separator { position: sticky; top: 80px; }

#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); }
}

.hero h1, .hero p,
.catalog-hero h1, .catalog-hero p,
.fuentes-hero h1, .fuentes-hero p,
.diccionarios-hero h1, .diccionarios-hero p {
	animation: slideUpText 0.5s ease-out forwards;
}

.cards-grid,
.ivory-section,
.catalog-main-container,
.fuentes-main-container,
.diccionarios-main-container,
#novedades .container,
#faq .container {
	animation: slideUpSolid 0.5s ease-out forwards;
}

/* =========================================
   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-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: 25px 25px; 
	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: 2.2rem; 
	color: var(--primary); 
	margin-bottom: 20px;
	width: 70px; height: 70px; 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: #f3e5f5; }
.card-icon.card-5 { background: #e0f2f1; }

.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;
}

.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; }
.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; }

/* =========================================
   7. SECCIÓN CATÁLOGO - HERO Y ESTRUCTURA
   ========================================= */
.catalog-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(46, 61, 73, 0.9)), 
				url('../imagenes/catalogo.avif');
	background-size: cover;
	background-position: center;
	padding: 40px 0 45px 0;
	text-align: center;
	color: white;
	border-radius: 0;
	width: 100%;
}

.catalog-hero h1 {
	font-size: 2.5rem;
	margin-bottom: 10px;
	font-weight: 700;
}
.catalog-hero p {
	font-size: 1.1rem;
	opacity: 0.9;
	max-width: 800px;
	margin: 0 auto;
}

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

/* =========================================
   8. ESTILOS PARA BÚSQUEDA SIMPLE MODERNA
   ========================================= */
.simple-search-header {
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0, 114, 187, 0.1);
}

.simple-search-header h3 {
	font-size: 1.8rem;
	color: var(--primary);
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.modern-search-wrapper {
	max-width: 800px;
	margin: 0 auto 40px;
}

.modern-search-input-group {
	display: flex;
	align-items: center;
	background: white;
	border-radius: 50px;
	padding: 6px 8px 6px 5px; 
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	border: 2px solid #e1e5e9;
	transition: all 0.3s;
	position: relative;
}

.modern-search-input-group:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(0, 114, 187, 0.15); 
	background: white;
}

.modern-search-input {
	flex: 1;
	border: none;
	padding: 18px 10px;
	font-size: 1.1rem;
	background: transparent !important;
	outline: none !important;
	color: #333;
	box-shadow: none !important;
}

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

.search-input-icon {
	font-size: 1.2rem;
	color: #888;
	margin-left: 20px;
	margin-right: 10px;
}

.modern-search-input::placeholder {
	color: #adb5bd;
	font-weight: 200;
	opacity: 1;
}

.modern-search-btn {
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	color: white;
	border: none;
	border-radius: 44px; 
	padding: 13px 28px; 
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: all 0.3s;
	white-space: nowrap;
}

.modern-search-btn:hover {
	background: linear-gradient(135deg, var(--primary-dark), #004a7c);
	box-shadow: 0 4px 15px rgba(0, 114, 187, 0.3);
}

.search-hint {
	text-align: center;
	margin-top: 12px;
	color: #777;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.database-selector {
	background: transparent;
	padding: 10px 0; 
	margin: 25px 0; 
	border: none;
}

.selector-title {
	font-size: 1rem;
	color: #666;
	margin-bottom: 15px; 
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.db-selector-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); 
	gap: 0;
	max-width: 800px;
	margin: 0 auto;
	border: 2px solid #e1e5e9;
	border-radius: 12px;
	overflow: hidden;
}

.db-option-card {
	position: relative;
}

.db-radio {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 2;
}

.db-card-label {
	display: flex;
	flex-direction: row; 
	align-items: center; 
	justify-content: center;
	gap: 10px; 
	padding: 12px 5px; 
	background: white;
	border: none;
	border-right: 1px solid #e1e5e9;
	cursor: pointer;
	transition: all 0.2s;
	height: 100%;
	text-align: center;
}

.db-option-card:last-child .db-card-label {
	border-right: none;
}

/* Detectamos el hover en el radio invisible y alteramos la tarjeta visual */
.db-radio:not(:checked):hover + .db-card-label {
	background: #e9f2f9; /* Celeste pastel suave */
	transform: translateY(-1px);
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.db-radio:checked + .db-card-label {
	background: var(--primary);
	color: white;
}

.db-icon {
	font-size: 1rem;
	color: var(--primary);
	flex-shrink: 0;
}

.db-radio:checked + .db-card-label .db-icon {
	color: white;
}

.db-info h5 {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.db-info p {
	display: none;
}

.format-selector-modern {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid #eee;
}

.format-label {
	font-weight: 600;
	color: #555;
	display: flex;
	align-items: center;
	gap: 8px;
}

.modern-select {
	padding: 10px 40px 10px 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: white;
	font-size: 1rem;
	color: #333;
	cursor: pointer;
	transition: all 0.3s;
	min-width: auto; 
	width: fit-content;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

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

/* =========================================
   9. SECCIÓN CATÁLOGO (Pestañas y Forms)
   ========================================= */
.catalog-wrapper {
	background: white; border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
	margin-top: 0px; 
	border: 1px solid var(--border);
	border-top: 5px solid var(--primary);
	position: relative;
}

.catalog-wrapper:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary) 100%);
	z-index: 1;
}

.tabs-nav { 
	display: flex; 
	background: #f1f3f5; 
	border-bottom: 1px solid var(--border); 
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	position: relative;
	z-index: 2;
}

.tabs-nav::-webkit-scrollbar {
	display: none; 
	width: 0;
	height: 0;
}

.tab-btn {
	padding: 16px 22px;
	background: none; border: none; cursor: pointer; 
	font-weight: 700; 
	color: #444; 
	font-size: 1.1rem;
	border-bottom: 3px solid transparent; transition: 0.3s; white-space: nowrap;
	flex-grow: 1;
	text-align: center;
	flex-basis: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.tab-btn i {
	color: var(--accent);
	font-size: 1.1rem;
}

.tab-btn:hover { background: rgba(0,0,0,0.03); color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: white; }

.tab-content { 
	display: none; 
	padding: 40px; 
	opacity: 0;
	transform: translateY(-10px);
}

.tab-content.active { 
	display: block; 
	animation: tabSlideDown 0.35s ease-out forwards;
}

@keyframes tabSlideDown {
	to { 
		opacity: 1; 
		transform: translateY(0);
	}
}

.db-radios { 
	display: none;
}

.search-group-unified {
	display: flex;
	margin-bottom: 20px;
	align-items: center; 
	box-shadow: 0 0 0 3px rgba(0, 114, 187, 0.15); 
	border-radius: 4px;
	overflow: hidden;
}

.search-group-unified .form-control {
	flex-grow: 1;
	border-radius: 4px 0 0 4px; 
	border: 1px solid var(--primary);
	border-right: none;
	height: 48px;
	background-color: #fcfcfc;
}

.search-group-unified .btn-primary {
	border-radius: 0 4px 4px 0;
	padding: 12px 25px; 
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-label { 
	display: block; 
	margin-bottom: 10px; 
	font-weight: 600; 
	color: var(--secondary); 
	font-size: 1rem;
}

.form-row { 
	margin-bottom: 25px; 
}

.format-selector-group { 
	display: none;
}

.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); }

.boolean-group { display: flex; gap: 10px; margin-bottom: 10px; }
.select-bool { width: 100px; background: #eee; }

/* =========================================
   10. ESTILOS ESPECÍFICOS PARA BÚSQUEDA AVANZADA
   ========================================= */
.advanced-search-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.advanced-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.advanced-form-group.full-width {
	grid-column: span 2;
}
.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-actions {
	grid-column: span 2;
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #eee;
}

.advanced-help-text {
	grid-column: span 2;
	font-size: 0.85rem;
	color: #888;
	margin-top: -10px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.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-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: 40px;
	margin: 0 auto;
	align-items: flex-start;
}

.fuentes-left-column {
	flex: 1;
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: var(--shadow);
	padding: 30px;
	border-top: 5px solid #cce3f6; 
	transition: all 0.3s ease;
	align-self: stretch;
}

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

.fuentes-column-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 20px;
	padding-bottom: 8px;
	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: 12px 20px;
	transition: all 0.2s;
	width: 100%;
	cursor: pointer;
}

.fuentes-option-text {
	font-size: 1rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-grow: 1;
}

.fuentes-option-text i {
	color: var(--primary);
	font-size: 0.9rem;
	width: 20px;
	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.85rem;
	color: #888;
	padding: 8px 20px 12px 50px;
	display: block;
	line-height: 1.5;
	font-style: normal;
	background-color: inherit;
	margin-top: 0;
	position: relative;
}

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

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

.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: 10px 20px 10px 40px !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: 60px !important;
}

.fuentes-submenu-note {
	background-color: #f0f4f8;
	font-size: 0.85rem;
	color: #666;
	padding: 10px 20px;
	text-align: left;
	line-height: 1.4;
	font-style: normal;
	border-top: 1px solid var(--border);
	margin-top: 0;
	padding-left: 40px;
}

.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: 30px;
	border-top: 5px solid #cce3f6; 
	transition: all 0.3s ease;
	max-height: 1200px;
	overflow-y: auto;
	position: sticky;
	top: 20px;
	align-self: flex-start;
	min-height: 800px;
	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.95rem;
	text-align: left;
	margin-bottom: 20px;
	line-height: 1.5;
}

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

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

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

.fuentes-search-input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 1rem;
	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: 12px;
	margin-top: 20px;
	width: 100%;
}

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

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

.fuentes-index-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 20px;
	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(50px, 1fr));
	gap: 8px;
	margin-bottom: 20px;
	width: 100%;
}

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

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

.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;
}

.news-year-group {
	margin-bottom: 10px;
}

.news-group-content {
	display: grid; 
	gap: 20px; 
	padding: 0 10px;
	overflow: hidden;  
	max-height: 0;
	opacity: 0;
	transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), 
				opacity 0.3s ease, 
				padding 0.4s ease;
}

.news-year-group.open .news-group-content {
	max-height: 2500px;
	opacity: 1;
	padding-top: 20px;
	padding-bottom: 20px;
	transition: max-height 0.6s ease-in-out, 
				opacity 0.5s ease, 
				padding 0.5s ease;
}

.year-toggle-icon {
	transition: transform 0.3s ease;
}

.news-year-group.open .year-toggle-icon {
	transform: rotate(90deg); 
}

.news-item { 
	display: flex; 
	gap: 20px; 
	background: white; 
	padding: 20px; 
	border-radius: 8px; 
	border-left: 4px solid #cce3f6; 
	box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

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

.news-year-separator {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gov-blue); 
	margin: 40px 0 10px 0; 
	background-color: var(--white);
	border-radius: 4px;
	display: flex; 
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	cursor: pointer; 
	border-left: 6px solid var(--accent);
}

.news-year-separator:hover {
	background-color: #f8f8f8;
}

.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-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-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;
}

.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;
}

/* =========================================
   17. MODAL PARA GUÍA DE FUENTES
   ========================================= */
.modal-fuentes {
	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;
}

.modal-fuentes-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;
	animation: modalFadeIn 0.3s ease-out;
}

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

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

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

.modal-fuentes-close-btn:hover {
	opacity: 1;
}

.modal-fuentes-iframe-container {
	width: 100%;
	flex-grow: 1;
	overflow-y: auto; 
	scrollbar-gutter: stable;
	border-radius: 0 0 4px 4px;
}

.modal-fuentes-frame {
	width: 100%;
	height: 100%;
	border: none;
	background: white;
	display: block;
}

/* =========================================
   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-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: 1px solid var(--border); 
	border-radius: 8px;
	padding: 35px 30px; 
	transition: all 0.3s ease;
	border-top: 4px solid #cce3f6;
	display: flex; 
	flex-direction: column; 
	box-shadow: var(--shadow);
	justify-content: space-between;
}

.diccionario-card:hover {
	border-top-color: #fdb913;
}

.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: transform 0.2s, color 0.2s; 
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
}

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

.diccionario-resena {
	max-height: 0; opacity: 0; overflow: hidden;
	margin-bottom: 0; padding: 0 20px; border-width: 0;
	background-color: #fdfbf7; 
	border-style: solid;
	border-color: #efeadd;
	border-left: 3px solid var(--accent); 
	font-size: 0.9rem; color: #444; line-height: 1.5; text-align: justify; 
	border-radius: 6px;
	transition: all 0.35s ease-in-out;
}

.diccionario-resena.abierto {
	max-height: 1000px; opacity: 1;
	margin-bottom: 20px; padding: 15px 20px; 
	border-width: 1px;
}

.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: 44px; 
	font-size: 1rem;
	background-color: #fcfcfc; 
	border: 1px solid #e1e4e8; 
	border-radius: 6px;
	transition: all 0.3s;
}

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

.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); 
	background-color: var(--primary-dark);
}

.toggle-avanzada-dicc {
	color: #777; font-size: 0.85rem; cursor: pointer; display: inline-flex;
	align-items: center; gap: 5px; margin: 15px 0 5px 0; font-weight: 500; transition: color 0.2s;
}
.toggle-avanzada-dicc:hover { color: var(--primary); }

.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;
}

.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;
}

.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);
}

/* =========================================
   MIGAS DE PAN (DENTRO DEL MODAL)
========================================= */
.modal-breadcrumb-container {
    background-color: #f8fafc;
    padding: 12px 20px;
    border-bottom: 1px solid #e1e4e8;
    font-size: 0.85rem;
    color: #555;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Si es muy largo en celular, baja de línea prolijamente */
    gap: 6px;
}

/* Ocultar la barra si todavía no tiene texto adentro */
.modal-breadcrumb-container:empty {
    display: none; 
}

.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; 
    }
}

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

/* Opcional: Si querés que tamién se aplique a los demás, sumalos separados por coma */
#modal-mapa, #modal-mis-busquedas, #results-modal, #fuentes-modal {
    animation: aparecerModal 0.2s ease-out forwards;
}

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


	/* --- NAVEGACIÓN MÓVIL --- */
	.logo img { 
		height: 50px !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 */
	}

	#results-modal .modal-content, 
	#fuentes-modal .modal-fuentes-content {
		width: 100% !important; 
		max-width: 100% !important; 
		height: auto !important;
		min-height: 150px !important;
		max-height: 100vh !important;    /* fallback para browsers viejos */
		max-height: 100dvh !important;   /* browsers modernos: descuenta barras del navegador */
		margin: 0 !important; 
		border-radius: 0 !important; 
		border: none !important;
	}

	.results-header, 
	.modal-fuentes-header { 
		padding: 10px 15px !important; 
		height: 55px !important; 
		border-radius: 0 !important; 
	}

	.iframe-container, 
	.modal-fuentes-iframe-container { 
		width: 100% !important; 
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important; 
		margin: 0 !important; 
	}

	/* --- HOME & GENERAL --- */
	.info-grid { 
		grid-template-columns: 1fr; 
		gap: 40px; 
	}

	.boolean-group { 
		flex-direction: column; 
	}

	.select-bool { 
		width: 100px; 
		background: #eee; 
	}

	.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; 
	}

	/* --- CATÁLOGO --- */
	.catalog-main-container { 
		margin: -15px auto 40px !important; 
		padding: 0 15px; 
		z-index: 10;
	}

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

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

	.catalog-wrapper { 
		border-top: 4px solid var(--primary); 
		margin-top: 0px; 
	}

	.tabs-nav { 
		display: flex; 
		width: 100%; 
	}

	.tab-btn { 
		flex: 1; 
		width: 50%; 
		padding: 14px 10px !important; 
		font-size: 1rem !important; 
		text-align: center; 
		white-space: normal; 
	}

	.tab-content { 
		padding: 20px !important; 
	}

	/* Búsqueda Avanzada Unificada (Móvil) */
	.search-group-unified { 
		display: flex; 
		flex-direction: row; 
		box-shadow: none; 
		border-radius: 8px; 
		overflow: hidden; 
		border: 1px solid var(--primary); 
	}

	.search-group-unified .form-control { 
		flex-grow: 1; 
		border-radius: 0; 
		border: none; 
		border-right: 1px solid var(--border); 
		margin-top: 0; 
		height: 44px; 
	}

	.search-group-unified .btn-primary { 
		border-radius: 0; 
		width: auto; 
		margin-top: 0; 
		height: 44px; 
	}

	.format-selector-modern { 
		flex-direction: column; 
		text-align: center; 
	}

	/* Formulario Avanzado */
	.advanced-search-form { 
		grid-template-columns: 1fr !important; 
		gap: 15px !important; 
	}

	.advanced-form-group { 
		margin-bottom: 15px !important; 
	}

	.advanced-form-group.full-width { 
		grid-column: span 1 !important; 
	}

	.advanced-form-actions { 
		grid-column: 1 / -1 !important; /* Salta cualquier grilla y ocupa todo el renglón */
		display: flex !important;
		flex-direction: row !important;
		gap: 15px !important;
		width: 100% !important;
		max-width: 600px !important; 
		margin: 20px auto 0 auto !important; /* Centrado con 20px de respiro arriba */
		padding-top: 15px !important; 
	}

	.advanced-form-actions .btn { 
		flex: 1 !important; /* Los divide 50/50 automáticamente */
		padding: 10px 15px !important; 
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important; 
		gap: 8px !important;
	}
	
	.advanced-form-actions .btn i {
		margin: 0 !important; 
	}

	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; 
	}

	.advanced-help-text { 
		grid-column: span 1 !important; 
		margin-top: 5px !important; 
		margin-bottom: 15px !important; 
		font-size: 0.8rem !important; 
		flex-direction: column !important; 
		align-items: flex-start !important; 
		gap: 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 */
	}
	
	/* --- BÚSQUEDA SIMPLE (SOLO MÓVIL) --- */

	/* Volamos la lupa redundante de la izquierda */
	.search-input-icon { 
		display: none !important; 
	}

	/* 1. Caja rectangular */
	.modern-search-input-group { 
		display: flex !important;
		flex-direction: row !important;
		border-radius: 8px !important;
		border: 1px solid #d0d7de !important;
		padding: 0 !important;
		height: 52px !important;
		overflow: visible !important; /* ← el cambio clave, antes era hidden */
	}

	/* El wrapper interno es quien aplica el overflow: hidden para las esquinas */
	.search-inner-group {
		display: flex !important;
		flex-direction: row !important;
		width: 100% !important;
		height: 100% !important;
		overflow: hidden !important;       /* ← Aquí vive el recorte visual */
		border-radius: 8px !important;     /* ← Las esquinas redondeadas también */
	}

	/* 2. Campo de texto */
	.modern-search-input { 
		padding: 0 15px !important; 
		height: 100% !important; 
		margin: 0 !important; 
		font-size: 1rem !important; 
		text-overflow: ellipsis !important; /* Agrega "..." si el texto no entra */
		white-space: nowrap !important;
		overflow: hidden !important;
	}

	/* 3. Botón Buscar */
	.modern-search-btn { 
		width: 60px !important; 
		height: 100% !important; 
		padding: 0 !important; 
		margin: 0 !important; 
		border-radius: 0 8px 8px 0 !important; 
		font-size: 0 !important; 
		/* CLAVE: Lo convertimos en una caja de referencia */
		position: relative !important; 
	}

	.modern-search-btn i { 
		font-size: 1.3rem !important; 
		margin: 0 !important; 
		padding: 0 !important;
		/* EL TRUCO DEFINITIVO: Centrado matemático ignorando el texto fantasma */
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}

	/* 4. HINTS: Foquito pegado al texto y todo centrado */
	.search-hint { 
		display: block !important; /* Dejamos de usar flexbox para esto */
		text-align: center !important; 
		margin-top: 10px !important;
	}

	.search-hint i { 
		display: inline-block !important; /* Se comporta como texto */
		margin: 0 5px 0 0 !important; /* Separación milimétrica hacia la derecha */
	}

	/* Obligamos a los párrafos/textos internos a fluir junto al foquito */
	.search-hint p, 
	.search-hint span, 
	.search-hint div {
		display: inline !important; 
	}

	/* 4. Selector BDD más compacto (Tablets) */
	.db-card-label { 
		border: none !important; 
		margin: 0 !important; 
		height: auto !important; 
		padding: 8px 5px !important; /* Relleno vertical más chico */
	}

	/* 5. Selector de Bases (Grilla 2x2 con líneas separadoras perfectas) */
	.db-selector-grid { 
		grid-template-columns: repeat(2, 1fr) !important; 
		min-width: auto !important; 
		gap: 1px !important; /* Crea las líneas divisorias */
		background-color: #e1e5e9 !important; /* Color de las líneas */
		border: 1px solid #e1e5e9 !important; 
		border-radius: 8px !important; 
		overflow: hidden !important; 
		padding: 0 !important;
		width: 100% !important;
		max-width: 600px !important; /* El tamaño intermedio ideal para tablet/landscape */
		margin: 0 auto 25px auto !important; /* Lo centra horizontalmente en la pantalla */
	}

	.db-option-card { 
		background-color: white !important; /* Fondo de cada celda */
	}

	.db-card-label { 
		border: none !important; /* Borramos bordes viejos porque el 'gap' hace el trabajo */
		margin: 0 !important; 
		height: 100% !important; 
	}
	
	/* --- 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 */
	}
	.texto-mis-busquedas {
		display: none !important; /* Esconde el texto "Mis búsquedas", deja solo el ícono y el número */
	}
	
}

/* =========================================
   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; 
	}

	.card.card-secundaria { 
		padding: 20px 15px; 
	}

	.badge-externo { 
		top: 10px; 
		right: 10px; 
		font-size: 0.6rem; 
	}
	
	
	/* --- 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-mis-busquedas {
		display: none !important; /* Esconde el texto "Mis búsquedas", deja solo el ícono y el número */
	}
	
	.texto-recurso-nacional {
        text-align: center;
    }
}

/* =========================================
   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;
	}

	/* --- CATÁLOGO --- */
	.catalog-hero { 
		/* Le damos un poco más de espacio abajo (45px) al banner negro para que el título no quede ahorcado */
		padding: 30px 0 45px 0 !important; 
	}

	.catalog-hero h1 { 
		font-size: 1.7rem; 
	}

	.catalog-main-container { 
		margin: -20px auto 30px !important;
		padding: 0 8px !important;				
	}

	.catalog-wrapper { 
		margin-top: 0px; 
	}

	.tab-btn { 
		padding: 12px 8px !important; 
		font-size: 0.9rem !important; 
		min-height: 48px; 
		display: flex; 
		align-items: center; 
		justify-content: center; 
		line-height: 1.2; 
	}
	
	/* Catálogo - Mantenemos grilla 2x2 con líneas */
	.db-selector-grid { 
		grid-template-columns: repeat(2, 1fr) !important; 
	}

	.db-card-label { 
		padding: 6px 5px !important; /* Aún menos altura */
		white-space: normal !important; 
		flex-direction: column !important; 
		gap: 2px !important; /* Acercamos el ícono al texto */
		font-size: 0.85rem !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; 
	}
	
	/* --- PESTAÑAS (JERARQUÍA Y ALINEACIÓN) --- */
	.tab-btn {
		padding: 12px 2px !important; 
		font-size: 1rem !important; /* RESTAURADO: Tamaño dominante */
		font-weight: 700 !important; /* RESTAURADO: Negritas para darle presencia */
		min-height: 48px;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important; /* Mantiene el emoji y el texto unidos */
		white-space: nowrap !important; /* Evita que "Búsqueda Avanzada" se parta en 2 renglones */
	}

	.tab-btn i {
		margin: 0 !important; /* Limpia márgenes que empujan */
		font-size: 1.1rem !important; /* Iguala el tamaño visual de lupa y engranaje */
	}

	.selector-title, /* Si el título de las bases usa esta clase */
	.form-label { /* Si "Formato de resultados" usa esta clase */
		font-size: 0.95rem !important; /* Los bajamos un poquito */
		color: #555 !important; /* Un gris oscuro en lugar de negro puro suaviza el peso */
		font-weight: 600 !important; 
		margin-bottom: 12px !important; 
	}
	
	/* --- AJUSTES BÚSQUEDA AVANZADA --- */

	/* 1. IGUALAR SELECTOR BDD AL DE BÚSQUEDA SIMPLE */
	.advanced-search-form .db-selector-grid {
		width: 100% !important; /* Lo obliga a estirarse completo */
		margin: 0 !important;
	}
	
	.advanced-search-form .db-card-label {
		font-size: 0.85rem !important; /* Mismo tamaño de letra */
		padding: 10px !important; /* Mismo relleno */
	}

	/* --- BÚSQUEDA AVANZADA: CHECKBOX Y BOTONES (MÓVIL) --- */
	/* 1. La caja principal se apila en columna */
	.advanced-form-actions {
		display: flex !important;
		flex-direction: column !important; /* Checkbox arriba, botones abajo */
		align-items: flex-start !important; /* Alinea todo a la izquierda */
		gap: 25px !important; /* El respiro visual entre el checkbox y los botones */
		width: 100% !important;
		margin-top: 15px !important;
	}

	/* 2. El Label (Checkbox) ocupa todo el ancho */
	.advanced-form-actions label {
		width: 100% !important;
	}

	/* 3. El Div anónimo que envuelve a los botones */
	.advanced-form-actions > div {
		display: flex !important;
		flex-direction: row !important; /* Botones uno al lado del otro */
		width: 100% !important;
		gap: 15px !important;
	}

	/* 4. Los botones se dividen el espacio 50/50 */
	.advanced-form-actions .btn {
		flex: 1 !important; 
		width: 100% !important;
		padding: 10px !important; 
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
	}

	.advanced-form-actions .btn i {
		margin: 0 !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; 
	}

	#fuentes-modal .modal-fuentes-content {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important; 
		max-height: 100% !important; 
		max-height: 100dvh !important; 
		border-radius: 0 !important; 
		/* EL FIX 1: Pintamos el fondo del modal del mismo gris que el iframe (#f4f6f8) */
		background-color: #f4f6f8 !important; 
	}

	#fuentes-modal .modal-fuentes-header {
		border-radius: 0 !important;
		flex: 0 0 auto !important; 
	}

	#fuentes-modal .modal-fuentes-iframe-container {
		flex: 1 1 auto !important; 
		height: auto !important; 
		min-height: 0 !important; 
		border-radius: 0 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important; 
		/* EL FIX 2: Aniquilamos el colchón blanco que sobraba abajo */
		padding-bottom: 0 !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 */
	}
	.texto-mis-busquedas {
		display: none !important; /* Esconde el texto "Mis búsquedas", deja solo el ícono y el número */
	}
}

/* =========================================
   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; 
}