/*
 * Header search dropdown styles
 * Scoped to .container-nav to avoid impacting other pages/components.
 */

/* ---------------------------------------------------------------
   1. Contenedor .miDiv: posiciona icono + panel desplegable
   Añadido margin-left:12px para separar la lupa del último
   item del menú ("Quiero Donar") y evitar que queden pegados.
   --------------------------------------------------------------- */
.container-nav .miDiv {
	position: relative;
	float: right;
	width: 40px;
	min-height: 68px;
	margin-left: 12px;
}

/* Compensar el margin-left:12px de .miDiv para que nav + miDiv
   no excedan el 100% y .miDiv no caiga a la siguiente línea.
   index.css define nav { width: calc(100% - 40px) }; ahora
   necesitamos restar también los 12px del margen → 52px total. */
.container-nav nav {
	width: calc(100% - 52px);
}

/* Icono-trigger (lupa visible por defecto) */
/* Sobreescribe index.css .icono-desplegable { padding-left:40px } */
.container-nav .icono-desplegable {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-height: 68px;
	padding: 0;
	font-size: 20px;
	float: none;
	line-height: 1;
}

/* Evita que .icon-search aplique márgenes globales dentro del header. */
.container-nav .icon-search {
	margin-left: 0;
}

/* ---------------------------------------------------------------
   1b. Visibilidad del panel desplegable
   Se controla 100 % desde JS (mouseenter/mouseleave sobre #search-button).
   Aquí solo anulamos el hover CSS de index.css para que no interfiera.
   index.css → div.miDiv:hover div.texto-desplegable { display:block !important }
   --------------------------------------------------------------- */

/* Anular: hover en .miDiv ya NO muestra el panel */
div.miDiv:hover div.texto-desplegable {
	display: none !important;
}

/* JS toggle: la clase .active siempre muestra el panel */
.container-nav .miDiv .texto-desplegable.active {
	display: block !important;
}

/* ---------------------------------------------------------------
   2. Panel desplegable
   --------------------------------------------------------------- */
.container-nav #div-desplegable {
	position: absolute;
	right: 0;
	top: 0;
	width: 360px;
	min-height: 68px;
	z-index: 100;
	background-color: #004481;
}

/* Cuando JS le agrega .active, se muestra sin depender del hover */
.container-nav #div-desplegable.active {
	display: block !important;
}

/* ---------------------------------------------------------------
   3. Form dentro del panel
   --------------------------------------------------------------- */
.container-nav #div-desplegable form#searchForm {
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 68px;
	padding: 0 4px;
}

.container-nav #div-desplegable .search-container {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-height: 68px;
}

/* ---------------------------------------------------------------
   4. Icono-lupa dentro del panel (submit visual)
   --------------------------------------------------------------- */
.container-nav #div-desplegable .search-container .icon-search#search-button2 {
	flex: 0 0 36px;
	width: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	min-height: 68px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

/* El icono real viene de icomoon vía pseudo-elemento; normaliza su caja para que no “brinque”. */
.container-nav #div-desplegable .search-container .icon-search#search-button2::before {
	display: block;
	line-height: 1;
}

.container-nav #div-desplegable .search-container .icon-search#search-button2:hover {
	opacity: 0.8;
}

/* ---------------------------------------------------------------
   5. Input de búsqueda
      Sobreescribe index.css .texto-desplegable input.search { margin-top:13px }
   --------------------------------------------------------------- */
.container-nav #div-desplegable .search-container input.search#searchInput {
	flex: 1 1 auto;
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	outline: 0;
	background-color: rgba(25, 115, 184, 1);
	color: #fff;
	font-family: 'BentonSansBBVA-Book';
	font-size: 14px;
	line-height: 24px;
}

.container-nav #div-desplegable .search-container input.search#searchInput::placeholder {
	color: #ffffff;
	opacity: 0.7;
}

.container-nav #div-desplegable .search-container input.search#searchInput:focus {
	border-color: rgba(91, 190, 255, 0.95);
	box-shadow: 0 0 0 2px rgba(91, 190, 255, 0.25);
}

/* ---------------------------------------------------------------
   6. Botón cerrar (X)
   --------------------------------------------------------------- */
.container-nav #div-desplegable .close-icon-search {
	flex: 0 0 36px;
	width: 36px;
	min-height: 68px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.container-nav #div-desplegable .close-icon-search:hover {
	opacity: 0.85;
}

/* ---------------------------------------------------------------
   7. Responsive — búsqueda en mobile
   En ≤991px index.css convierte .container-nav en menú vertical
   (hamburguesa) y pone nav { width:100% }. Necesitamos:
   - Devolver nav al 100% (nuestra regla desktop lo recorta a calc(100%-52px)).
   - Que .miDiv ocupe todo el ancho como una fila más del menú.
   - Que el panel desplegable se adapte al ancho disponible.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
	/* nav vuelve al 100% que index.css le da en mobile */
	.container-nav nav {
		width: 100%;
	}

	/* .miDiv se convierte en fila completa del menú vertical */
	.container-nav .miDiv {
		float: none;
		width: 100%;
		min-height: 52px;
		margin-left: 0;
		display: flex;
		align-items: center;
		border-top: solid 1px rgba(255, 255, 255, 0.75);
	}

	/* Lupa más pequeña, alineada a la izquierda */
	.container-nav .icono-desplegable {
		width: 52px;
		min-height: 52px;
		justify-content: center;
	}

	/* Panel: posición relativa para que fluya dentro del menú,
	   ocupa todo el ancho disponible */
	.container-nav #div-desplegable {
		position: relative;
		width: calc(100% - 52px);
		min-height: 52px;
		right: auto;
		top: auto;
	}

	/* Form del panel: ajustar altura */
	.container-nav #div-desplegable form#searchForm {
		min-height: 52px;
	}

	.container-nav #div-desplegable .search-container {
		min-height: 52px;
	}

	.container-nav #div-desplegable .search-container .icon-search#search-button2 {
		min-height: 52px;
	}

	.container-nav #div-desplegable .close-icon-search {
		min-height: 52px;
	}

	/* En mobile el panel siempre es visible (la barra de búsqueda
	   se muestra como parte del menú cuando está abierto) */
	.container-nav .miDiv .texto-desplegable {
		display: block !important;
	}
}

@media (max-width: 480px) {
	.container-nav #div-desplegable {
		width: calc(100% - 52px);
	}

	.container-nav #div-desplegable .search-container input.search#searchInput {
		padding: 0 8px;
		font-size: 13px;
	}
}

/* ============================
   7b. Logo del header — dimensiones y escalado
   El logo se redimensionó de 1890x610 a 274x75 (2026-03-24).
   Estas reglas aseguran que el <img> con width/height nativos
   se escale fluidamente sin desbordarse del contenedor .logo.
   ============================ */

/* Desktop: el logo ocupa un max-width razonable dentro de .logo.
   height:auto preserva la proporción del PNG. */
.logo a {
    display: inline-block; /* el enlace se ajusta al tamaño de la imagen, no del div padre */
}

.logo img {
    max-width: 240px;
    height: 75px;
    display: block;
}

/* Tablet y móvil (≤991px): index.css ya define .logo img { max-width:100px },
   reforzamos para asegurar que no se desborde. */
@media (max-width: 991px) {
	.logo img {
		max-width: 100px;
		height: auto;
	}
}

/* Móvil pequeño (≤500px): logo más compacto */
@media (max-width: 500px) {
	.logo img {
		max-width: 80px;
	}
}


/* ============================
   10. Highlight del término de búsqueda
   El filtro fbbva_highlight_search_term() envuelve coincidencias en
   <mark class="search-highlight">. Estos estilos le dan visibilidad.
   ============================ */

mark.search-highlight {
	background-color: rgba(25, 115, 184, 0.15);
	color: inherit;
	padding: 1px 2px;
	border-radius: 2px;
}

/* ============================
   11. Contador de resultados ("Se encontraron X resultados")
   ============================ */

.related-post .search-results-count {
	text-align: center;
	font-family: 'BentonSansBBVA-Book';
	font-size: 15px;
	color: #666;
	margin-bottom: 30px;
}

.related-post .search-results-count strong {
	font-family: 'BentonSansBBVA-Medium';
	color: #333;
}

/* ============================
   12. Responsive — paginación y contador
   ============================ */

@media (max-width: 768px) {
	.related-post .navigation.pagination .nav-links a.page-numbers,
	.related-post .navigation.pagination .nav-links span.page-numbers {
		min-width: 32px;
		height: 32px;
		font-size: 13px;
		padding: 0 6px;
	}

	.related-post .search-results-count {
		font-size: 14px;
		margin-bottom: 20px;
	}
}

/* ============================
   Legacy UI (search-header) - mantener compatibilidad
   ============================ */

.container-nav .search-header {
	display: block;
	position: absolute;
	width: 100%;
	top: 0px;
	right: calc(-100% + 40px);
	min-height: 68px;
	transition: linear right 500ms;
	background-color: rgba(25, 115, 184, 1);
}

.container-nav .search-header.active {
	right: 0%;
}

.container-nav .search-header .action-icon-search {
	display: block;
	float: left;
	width: 40px;
	min-height: 68px;
	line-height: 68px;
	font-size: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.container-nav .search-header .action-icon-search span {
	cursor: pointer;
}

.container-nav .search-header .search-inpunt {
	display: block;
	float: left;
	width: calc(100% - 80px);
	min-height: 68px;
}

.container-nav .search-header .search-inpunt input.search {
	display: block;
	width: 100%;
	height: 40px;
	opacity: 1;
	font-family: 'BentonSansBBVA-Book';
	color: white;
	line-height: 24px;
	background-color: rgba(25, 115, 184, 1);
	margin-top: 13px;
	border: none;
	outline: 0;
}

.container-nav .search-header .search-inpunt input.search::-webkit-input-placeholder {
	color: #FFFFFF;
	opacity: 0.7;
}

.container-nav .search-header .search-inpunt input.search::-moz-placeholder {
	color: #FFFFFF;
	opacity: 0.7;
}

.container-nav .search-header .search-inpunt input.search:-ms-input-placeholder {
	color: #FFFFFF;
	opacity: 0.7;
}

.container-nav .search-header .search-inpunt input.search:-moz-placeholder {
	color: #FFFFFF;
	opacity: 0.7;
}

.container-nav .search-header .close-icon-search {
	display: block;
	float: left;
	width: 40px;
	min-height: 68px;
	line-height: 68px;
	font-size: 20px;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	cursor: pointer;
}

.container-nav .search-header .close-icon-search:hover span.icon-close {
	opacity: 0.6;
}

.container-nav .search-header .close-icon-search span.icon-close {
	position: absolute;
	width: 20px;
	opacity: 1;
	background: #5BBEFF;
	height: 2px;
	cursor: pointer;
	display: block;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	transform: translateX(-50%) translateY(-50%) rotate(40deg);
	transition: ease opacity 300ms;
}

.container-nav .search-header .close-icon-search span.icon-close:before {
	content: '';
	position: absolute;
	width: 20px;
	background: #5BBEFF;
	height: 2px;
	cursor: pointer;
	display: block;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	transform: translateX(-50%) translateY(-50%) rotate(95deg);
}

.container-nav .search-header .list-search {
	display: none;
	position: absolute;
	background-color: #fff;
	width: 100%;
	top: 68px;
	z-index: 99;
	box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.75);
}

.container-nav .search-header .list-search .list {
	padding: 30px 40px;
	display: block;
	width: 100%;
	float: left;
}

.container-nav .search-header .list-search .list h4 {
	font-family: 'BentonSansBBVA-Medium';
	font-size: 14px;
	color: #666666;
	letter-spacing: -0.2px;
	line-height: 24px;
	margin: 0px;
}

.container-nav .search-header .list-search .list ul {
	display: block;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.container-nav .search-header .list-search .list ul li {
	width: 100%;
	font-family: 'BentonSansBBVA-Book';
	font-size: 15px;
	color: #2A2A2A;
	line-height: 24px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.container-nav .search-header .list-search .list ul li a {
	font-family: 'BentonSansBBVA-Medium';
	font-size: 15px;
	color: #237ABA;
	line-height: 24px;
	opacity: 1;
	transition: ease all 300ms;
}

.container-nav .search-header .list-search .list ul li a:hover {
	opacity: 0.6;
	text-decoration: none;
}

.container-nav .search-header .list-search .footer-search {
	background: #F4F4F4;
	display: block;
	width: 100%;
	float: left;
	padding: 30px 40px;
}

.container-nav .search-header .list-search .footer-search p {
	font-family: 'BentonSansBBVA-Book';
	font-size: 15px;
	color: #121212;
	letter-spacing: 0;
	line-height: 24px;
	margin: 0px;
}

.container-nav .search-header .list-search .footer-search p a {
	font-family: 'BentonSansBBVA-Medium';
	color: #237ABA;
	opacity: 1;
	transition: ease all 300ms;
}

.container-nav .search-header .list-search .footer-search p a:hover {
	opacity: 0.6;
	text-decoration: none;
}