/* ============================================================================
 * tema-v2 / marco-global.css  —  Fase 7, PR-7.1 (marco global del storefront)
 * ----------------------------------------------------------------------------
 * Restila el MARCO que se ve en cada página: header/nav, el buscador (estilo
 * "pill") y el footer. Estrategia OVERRIDE-FIRST: se cargan los tokens (7.0) y
 * se reusan los selectores existentes desde este archivo, cargado de ÚLTIMO en
 * el <head> (tras tokens.css + componentes.css) → gana la cascada por orden de
 * fuente. !important sólo donde el CSS base / Bootstrap lo fuerzan.
 *
 * BARANDAS (diseño Fase 7, §4): 0 cambios de lógica/JS/markup. Se PRESERVAN los
 * hooks de JS (pushbar data-*, data-toggle="dropdown", #modal-menu-producto,
 * cascada #selectMarca/#selectModelo/#selectAnio, autocomplete #search,
 * #formVehiculo/#formDescripcion). Logos/imágenes/textos: intactos. Hex de marca
 * EXACTOS (vía tokens) — sólo cambian forma, ritmo y micro-interacción.
 * ========================================================================== */

/* ===========================================================================
 * 1) HEADER / NAV  (ambición: sutil — sombra + hover + dropdowns redondeados)
 * ========================================================================= */

/* Marco del nav: la sombra actual es pesada y gris (0 2px 18px rgba(182…,.69));
 * se moderniza a una sombra suave + borde inferior fino. (#nav-principal: misma
 * especificidad que el inline <style>, pero carga después → gana.) */
#nav-principal {
	box-shadow: var(--sombra-sm);
	border-bottom: 1px solid var(--gris-100);
}

/* Links del menú principal: transición de color + hover azul de marca +
 * subrayado animado (pseudo ::before; el caret de Bootstrap usa ::after, no se
 * toca). El texto va en <strong class="letraMM"> (color #000 en style.css). */
.ul-menu-opciones .nav-link {
	position: relative;
	transition: color var(--transicion);
}
.ul-menu-opciones .nav-link .letraMM {
	transition: color var(--transicion);
}
.ul-menu-opciones .nav-link:hover .letraMM,
.ul-menu-opciones .nav-link:focus .letraMM {
	color: var(--bosch-azul);
}
.ul-menu-opciones .nav-link::before {
	content: "";
	position: absolute;
	left: .75rem;
	right: .75rem;
	bottom: 1px;
	height: 2px;
	background: var(--bosch-azul);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--transicion);
}
.ul-menu-opciones .nav-link:hover::before,
.ul-menu-opciones .nav-link:focus::before {
	transform: scaleX(1);
}

/* Iconos de la derecha (carrito / wishlist / perfil): feedback sutil al hover. */
.lista-opciones .nav-link {
	transition: opacity var(--transicion), color var(--transicion);
}
.lista-opciones .nav-link:hover {
	opacity: .82;
}

/* Badge del contador del carrito: forma pill. */
#cartCounter.badge {
	border-radius: var(--radio-pill);
}

/* Dropdowns del nav (menú de usuario + mega-menú de productos): redondeo +
 * sombra de marca + hover de items. NO se toca el posicionamiento
 * (right:calc(...) !important del inline) — sólo forma/sombra/padding. */
.menu-usuario-dropdown,
#modal-menu-producto.modal-menu-producto {
	border-radius: var(--radio);
	box-shadow: var(--sombra-card);
	border: 1px solid var(--gris-100);
}
.menu-usuario-dropdown {
	overflow: hidden;
	padding: var(--esp-2) 0;
}
.menu-usuario-dropdown .dropdown-item {
	padding: .5rem 1.25rem;
	transition: background-color var(--transicion), color var(--transicion);
}
.menu-usuario-dropdown .dropdown-item:hover,
.menu-usuario-dropdown .dropdown-item:focus {
	background-color: var(--gris-100);
	color: var(--bosch-azul);
}

/* ===========================================================================
 * 2) BUSCADOR  (estilo "pill" — ambos modos; CSS puro, hooks intactos)
 *    Scope acotado a .metodoBusquedaVeh / .metodoBusquedaDesc + ids concretos
 *    para NO afectar otros .input-group (p. ej. "Región de entrega").
 * ========================================================================= */

/* --- Modo VEHÍCULO: dropdowns SEPARADOS, cada uno pill completo ------------- */
/* (feedback Víctor) Antes Marca|Modelo|Año iban pegados en una sola cápsula
 * (input-group flush). Ahora se separan con un hueco y se redondea cada select
 * por completo, a juego con "Solo baterías" y "Buscar" (ya pills). Scope por id
 * de los 3 selects → NO afecta el OTRO .input-group del bloque (Región de
 * entrega, que debe seguir unida). El margen derecho crea el hueco; margin-left:0
 * anula cualquier solapamiento que Bootstrap aplique a los controles unidos. */
.metodoBusquedaVeh #selectMarca,
.metodoBusquedaVeh #selectModelo,
.metodoBusquedaVeh #selectAnio {
	border-radius: var(--radio-pill) !important;
	margin-left: 0 !important;
	padding-left: 1.1rem;
}
/* El hueco también tras "Año": queda pegado a "Solo baterías" porque ambas
 * columnas usan px-md-0 (sin gutter). El margen derecho de #selectAnio recrea la
 * misma separación que entre los selects. */
.metodoBusquedaVeh #selectMarca,
.metodoBusquedaVeh #selectModelo,
.metodoBusquedaVeh #selectAnio {
	margin-right: var(--esp-2);
}
/* "Solo baterías" (su propio .form-control, columna aparte): pill completo. */
.metodoBusquedaVeh .contenedor-checkbox {
	border-radius: var(--radio-pill) !important;
	padding-left: 1.1rem;
}

/* --- Modo DESCRIPCIÓN: grupo [Todos | texto | (x) | Buscar] como pill ------- */
/* Extremo izquierdo (select grupo estadístico): redondeo izquierdo pill. */
.metodoBusquedaDesc #btn-grupo-estadistico {
	border-top-left-radius: var(--radio-pill) !important;
	border-bottom-left-radius: var(--radio-pill) !important;
	padding-left: 1.1rem;
}
/* En fila (md+) el input y el botón "Borrar" son interiores → planos. */
@media (min-width: 768px) {
	.metodoBusquedaDesc #search,
	.metodoBusquedaDesc #clear-content-button {
		border-radius: 0 !important;
	}
	.metodoBusquedaDesc .btn-buscar-descripcion {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}
}

/* --- Botones "Buscar" de ambos modos: extremo redondeado pill -------------- */
.btn-buscar-vehiculo,
.btn-buscar-descripcion {
	border-radius: var(--radio-pill) !important;
}

/* --- Toggle de modo (radios "Buscar por vehículo / descripción"): más aire -- */
.OpcionVehiculo .custom-control-label,
.OpcionDescripcion .custom-control-label {
	transition: color var(--transicion);
	cursor: pointer;
}

/* ===========================================================================
 * 2b) REGIÓN DE ENTREGA  (input "Ciudad" + ícono "i") — redondear toda la barra.
 *     El input ya redondea su lado IZQUIERDO vía la primitiva de input-group
 *     (7.0, .form-control:first-child). El CSS base fuerza border-radius:0 en el
 *     ícono → su lado DERECHO queda cuadrado (feedback Víctor). Se cierra la
 *     barra redondeando sólo el lado derecho del ícono. NO se toca el JS del
 *     notify ni el `pointer-events:none` del input.
 * ========================================================================= */
.input-group-icon-info {
	border-top-right-radius: var(--radio-input);
	border-bottom-right-radius: var(--radio-input);
}

/* ===========================================================================
 * 3) FOOTER  (brand-exacto: azul #013763 + copyright #002446 + dorado; sólo
 *    más aire, ritmo de títulos y hover de enlaces. Imágenes/logos intactos.)
 * ========================================================================= */

/* Más respiro arriba del footer (token de espaciado). */
footer {
	padding-top: var(--esp-8);
}

/* Títulos de columna: familia de títulos + tracking + ritmo. */
footer .f-weghit2 h5,
footer .f-weghit2 h6 {
	font-family: var(--fuente-titulos);
	letter-spacing: .03em;
	margin-bottom: var(--esp-4);
}

/* Enlaces del footer: transición de color + hover azul informativo (acento). */
footer a,
.enlace-deco-none {
	transition: color var(--transicion), opacity var(--transicion);
}
footer a:hover,
.enlace-deco-none:hover {
	color: var(--bosch-azul-info);
	text-decoration: none;
}

/* Iconos de redes: micro-interacción al hover (sin tocar la imagen). */
.icons-redes {
	transition: transform var(--transicion), opacity var(--transicion);
}
.icons-redes:hover {
	transform: translateY(-2px);
	opacity: .9;
}

/* Barra de copyright: un poco más de aire (color de marca intacto). */
.copayright {
	padding: var(--esp-4);
}
