/* === HEADER PROFESIONAL UNIFICADO: /style/header.css === */

	:root{
	  --header-height: 80px;
	  --header-bg: #FFFFFF;
	  --header-border-color: #E5E7EB;
	  --header-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
	  --dropdown-shadow: 0 10px 25px rgba(0,0,0,.15);
	  --text-primary: #1F2937;
	  --text-secondary: #6B7280;
	  --brand-color: #28a745;
	  --accent-blue: #007bff;
	}

	/* --- Header base --- */
	.header{
	  background-color: var(--header-bg) !important;
	  border-bottom: 1px solid var(--header-border-color);
	  box-shadow: var(--header-shadow);
	  position: fixed;
	  top: 0; left: 0;
	  width: 100%;
	  z-index: 1000;
	}

	.header__container{
	  display: flex !important;
	  align-items: center;
	  justify-content: space-between;
	  max-width: 1600px;
	  height: var(--header-height);
	  margin: 0 auto;
	  padding: 0 24px;
	}

	/* =========================
	   LOGO (Badge + blindaje)
	   ========================= */

	/* Contenedor del logo: no estira */
	.header__logo,
	.header__logo a{
	  display:flex !important;
	  align-items:center !important;
	  height: var(--header-height);
	}

	/* “Badge” que mejora contraste */
	.header__logo.logo-badge{
	  background:#fff;
	  border: 1px solid var(--header-border-color);
	  border-radius: 16px;
	  padding: 8px 12px;
	  box-shadow: 0 6px 18px rgba(0,0,0,.08);
	  transition: transform .15s ease, box-shadow .15s ease;
	}

	.header__logo.logo-badge:hover{
	  transform: translateY(-1px);
	  box-shadow: 0 10px 22px rgba(0,0,0,.12);
	}

	/* Blindaje total del logo contra integrado.css (img {width:100%}, etc.) */
	.header__logo .logo-img{
	  height: 56px !important;      /* prueba 56 (si quieres menos: 52) */
	  max-height: 56px !important;
	  width: auto !important;
	  max-width: 220px !important;
	  display:block !important;
	  object-fit: contain !important;
	  flex: 0 0 auto !important;
	}

	/* --- Menú + búsqueda --- */
	.header__menu{
	  display:flex;
	  align-items:center;
	  flex-grow:1;
	  justify-content:center;
	}

	.header__nav ul{
	  list-style:none;
	  display:flex;
	  gap:32px;
	  margin:0;
	  padding:0;
	}

	.nav-link{
	  text-decoration:none;
	  color: var(--text-secondary);
	  font-weight:600;
	  font-size:.95rem;
	  transition: color .2s;
	}
	.nav-link:hover{ color: var(--brand-color); }

	.header__search{
	  margin-left:40px;
	  width:100%;
	  max-width:400px;
	}
	.header__search form{ display:flex; }
	.header__search input{
	  width:100%;
	  border:1px solid var(--header-border-color);
	  padding:8px 16px;
	  border-radius:20px 0 0 20px;
	  outline:none;
	}
	.header__search button{
	  padding:0 15px;
	  border:none;
	  background: var(--brand-color);
	  color:#fff;
	  border-radius:0 20px 20px 0;
	  cursor:pointer;
	}

	/* --- Acciones --- */
	.header__actions{
	  display:flex;
	  align-items:center;
	  gap:15px;
	}

	/* botón compartir circular (tu clase actual) */
	.header .imagen-boton-redondo{
	  width:40px !important;
	  height:40px !important;
	  border-radius:50% !important;
	  object-fit:cover !important;
	  display:block !important;
	}

	/* =========================
	   USER MENU (sin parpadeo)
	   ========================= */

	.user-menu{
	  position:relative;
	  display:inline-flex !important;
	  align-items:center;
	  cursor:pointer;
	}

	/* Avatar blindado */
	.user-menu__avatar,
	.header .user-menu__avatar{
	  width:40px !important;
	  height:40px !important;
	  min-width:40px !important;
	  min-height:40px !important;
	  max-width:40px !important;
	  max-height:40px !important;
	  border-radius:50% !important;
	  object-fit:cover !important;
	  display:block !important;
	  border:2px solid #eee;
	}

	/* Dropdown animado + puente */
	.user-menu__dropdown{
	  display:block;
	  opacity:0;
	  visibility:hidden;
	  pointer-events:none;
	  transform: translateY(-8px);
	  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;

	  position:absolute;
	  right:0;
	  top: calc(100% + 8px);
	  background:#fff;
	  min-width:220px;
	  border:1px solid var(--header-border-color);
	  border-radius:12px;
	  box-shadow: var(--dropdown-shadow);
	  padding:10px 0;
	  z-index:9999;
	}

	.user-menu__dropdown::before{
	  content:"";
	  position:absolute;
	  left:0; right:0;
	  top:-14px;
	  height:14px;
	}

	.user-menu:hover .user-menu__dropdown,
	.user-menu:focus-within .user-menu__dropdown{
	  opacity:1;
	  visibility:visible;
	  pointer-events:auto;
	  transform: translateY(0);
	}

	.user-menu__dropdown a{
	  display:flex;
	  align-items:center;
	  padding:10px 20px;
	  color: var(--text-primary);
	  text-decoration:none;
	  font-size:.9rem;
	  transition: background .2s, padding-left .2s, color .2s;
	}

	.user-menu__dropdown a:hover{
	  background:#f8f9fa;
	  color: var(--accent-blue);
	  padding-left:25px;
	}

	.dropdown-divider{
	  height:1px;
	  background:#f0f0f0;
	  margin:8px 0;
	  border:none;
	}

	/* Responsive */
	@media (max-width: 1024px){
	  .header__menu{ display:none; }
	  .header__mobile-toggle{ display:block; }
	}

	/* =========================
	   FIX LOGO DEFINITIVO (sin tocar HTML)
	   Pegar al FINAL de header.css
	   ========================= */

	.header__logo{
	  flex: 0 0 auto !important;
	  display: flex !important;
	  align-items: center !important;
	  height: var(--header-height) !important;
	  max-height: var(--header-height) !important;
	  max-width: 260px !important;   /* evita que se expanda */
	  overflow: hidden !important;   /* recorta si algo fuerza tamaños raros */
	}

	.header__logo a{
	  display: flex !important;
	  align-items: center !important;
	  height: 100% !important;
	  max-height: 100% !important;
	}

	/* Blindaje brutal contra: img{width:100%} o similares */
	.header .header__logo img{
	  height: 56px !important;       /* prueba 52/56 */
	  max-height: 56px !important;
	  width: auto !important;
	  max-width: 220px !important;
	  min-width: 0 !important;

	  display: block !important;
	  object-fit: contain !important;

	  /* si integrado.css mete transforms o cosas raras */
	  transform: none !important;
	}

	/* === CORRECCIONES PARA MÓVIL (CholloGo) === */

	@media (max-width: 1024px) {
		:root { --header-height: 65px; } /* Header un poco más bajo en móvil */

		.header__container {
			padding: 0 15px;
		}

		/* Estilo para el botón ☰ */
		.header__mobile-toggle {
			display: block !important;
			background: none;
			border: none;
			font-size: 28px;
			color: var(--text-primary);
			order: 1; /* Lo mueve a la izquierda si quieres, o déjalo por defecto */
			cursor: pointer;
		}

		/* El menú ahora es un panel que baja del header */
		.header__menu {
			display: none; /* Oculto por defecto */
			position: absolute;
			top: var(--header-height);
			left: 0;
			width: 100%;
			background: #fff;
			flex-direction: column;
			padding: 20px;
			box-shadow: var(--header-shadow);
			z-index: 999;
		}

		/* Clase que se activará con JS */
		.header__menu.is-active {
			display: flex !important;
		}

		.header__nav ul {
			flex-direction: column;
			gap: 15px;
			width: 100%;
		}

		.header__search {
			margin-left: 0;
			margin-top: 20px;
			max-width: 100%;
		}

		/* Ajuste del logo en móvil para que no empuje todo */
		.header .header__logo img {
			height: 40px !important;
			max-width: 150px !important;
		}
		
		.header__actions {
			order: 3;
		}
	}