/* ═══════════════════════════════════════════════════════
   TuSocioEnChina — Header Plugin CSS
   Extraído y adaptado del diseño aprobado de la home
═══════════════════════════════════════════════════════ */

/* Variables de marca (con prefijo tse- para no chocar con el tema) */
:root {
  --tse-red: #C8102E;
  --tse-red-hover: #a50d25;
  --tse-ink: #0D0D12;
  --tse-muted: #6B6B80;
  --tse-soft: #A0A0B0;
  --tse-border: #E0E0E6;
}

/* Reset de tap highlight — cubre nav, menú móvil y CUALQUIER
   elemento dentro (incluye pseudo-elementos y estados :active/:focus) */
.tse-nav, .tse-nav *, .tse-nav *::before, .tse-nav *::after,
.tse-mobile-menu, .tse-mobile-menu *, .tse-mobile-menu *::before, .tse-mobile-menu *::after {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}
.tse-nav-hamburger,
.tse-nav-hamburger *,
.tse-mobile-menu a,
.tse-mobile-menu a:link,
.tse-mobile-menu a:visited,
.tse-mobile-menu a:hover,
.tse-mobile-menu a:active,
.tse-mobile-menu a:focus {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Barra de navegación fija ── */
.tse-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 clamp(20px, 4vw, 72px);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tse-border);
  gap: 16px;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* Empuja el contenido de la página bajo la barra fija.
   El tema/Elementor puede necesitar este valor en su propio
   padding-top del primer contenedor; lo dejamos también aquí
   como red de seguridad para temas que no lo gestionen. */
body.tse-has-header {
  padding-top: 62px;
}

/* ── Logo ── */
.tse-nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  outline: none;
}
.tse-nav-logo-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  margin-right: 10px;
}
.tse-nav-logo-text {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 29px;
  letter-spacing: 2px;
  color: var(--tse-ink);
  line-height: 1;
  white-space: nowrap;
}
.tse-nav-logo-accent { color: var(--tse-red); }
.tse-nav-logo-tld    { color: var(--tse-soft); font-size: 20px; }

/* ── Enlaces centrales ── */
.tse-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  flex: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.tse-nav-links li { display: flex; align-items: center; line-height: 1; }
.tse-nav-links a {
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--tse-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color .15s;
  white-space: nowrap;
}
.tse-nav-links a:hover { color: var(--tse-ink); }

/* ── Lado derecho: selector de idioma (lo rellena el plugin de traducción) + CTA + hamburguesa ── */
.tse-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Placeholder del selector de idioma — el plugin de traducción
   inserta aquí sus botones de bandera vía hook JS/PHP. Se reserva
   min-width/min-height desde el principio (antes de que el JS del
   plugin de traducción inserte nada) para que el resto de la barra
   (los enlaces centrados) no salte de sitio cuando el globo aparece
   una fracción de segundo después de cargar la página. */
.tse-lang-slot {
  display: flex;
  align-items: center;
  min-width: 40px;
  min-height: 38px;
}



/* ── Hamburguesa con animación a X ── */
.tse-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  outline: none;
}
.tse-nav-hamburger,
.tse-nav-hamburger:focus,
.tse-nav-hamburger:active,
.tse-nav-hamburger:hover {
  outline: none;
  background: transparent !important;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.tse-nav-hamburger span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--tse-ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .2s ease;
  transform-origin: center;
}
.tse-nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tse-nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.tse-nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Menú móvil desplegable ── */
.tse-mobile-menu {
  position: fixed;
  top: 62px;
  left: 0; right: 0;
  z-index: 9998;
  background: #fff;
  border-bottom: 1px solid #E8E8EC;
  padding: 8px 0 12px;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  display: none;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
}
.tse-mobile-menu.open { display: flex; }
.tse-mobile-menu a {
  display: block;
  color: var(--tse-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-bottom: 1px solid #F2F2F5;
  outline: none;
  background: transparent;
}
.tse-mobile-menu a:last-of-type { border-bottom: none; }
.tse-mobile-menu a:active,
.tse-mobile-menu a:focus,
.tse-mobile-menu a:hover {
  color: var(--tse-red);
  background: transparent !important;
}
.tse-mobile-menu .tse-mobile-cta {
  margin: 12px 24px 4px;
  background: var(--tse-red);
  color: #fff;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-bottom: none;
}
/* Slot de idiomas dentro del menú móvil (rellenado por el plugin de traducción) */
.tse-mobile-lang-slot {
  display: flex;
  gap: 8px;
  padding: 12px 24px 4px;
  flex-wrap: wrap;
}

/* ── Responsive ──
   El punto de corte sube de 960px a 1400px: con 9 elementos en el menú
   (7 configurables + Ferias + Guías, algunos con etiquetas largas como
   "Gestiones en China" o "Taobao / Plataformas") más el selector de
   idioma, la fila completa necesita más de 1400px reales para no
   apretarse ni desbordar — que es justo el ancho de ventana habitual en
   portátiles de 13"-14" cuando el navegador no está a pantalla completa.
   Por debajo de 1400px se pasa a menú hamburguesa, que sí cabe siempre
   con holgura. */
@media (max-width: 1400px) {
  .tse-nav-links     { display: none !important; }
  .tse-nav-hamburger { display: flex !important; }
  .tse-nav { padding: 0 clamp(14px, 3vw, 24px); }
  .tse-nav-logo-img  { width: 45px; height: 45px; }
  .tse-nav-logo-text { font-size: 25px; }
  body.tse-has-header { padding-top: 62px; }
}
@media (max-width: 600px) {
  .tse-nav-logo-img  { width: 39px; height: 39px; margin-right: 9px; }
  .tse-nav-logo-text { font-size: 22px; }
}
@media (max-width: 400px) {
  .tse-nav-logo-img  { width: 34px; height: 34px; }
  .tse-nav-logo-text { font-size: 19px; }
}

/* ── Desplegable "Guías" en escritorio ──
   Todos los colores van en hexadecimal directo (no var()) y con
   !important en fondo/contorno: así ningún estado del navegador
   (focus, active, tema de la web) puede pintar un fondo oscuro encima
   ni dejar el texto invisible. */
.tse-nav-dropdown {
  position: relative;
}
.tse-nav-dropdown-toggle,
.tse-nav-dropdown-toggle:hover,
.tse-nav-dropdown-toggle:focus,
.tse-nav-dropdown-toggle:focus-visible,
.tse-nav-dropdown-toggle:active,
.tse-nav-dropdown-toggle[aria-expanded="true"] {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent !important;
  /* Color fijo en TODOS los estados — nunca cambia (ni al pulsar, ni al
     abrir el panel, ni en ninguna pantalla). */
  color: #6B6B80 !important;
}
.tse-nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  padding: 0;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tse-caret {
  font-size: 10px;
  transition: transform .2s ease;
  display: inline-block;
}
.tse-nav-dropdown-toggle[aria-expanded="true"] .tse-caret {
  transform: rotate(180deg);
}
.tse-nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  max-width: 280px;
  max-height: 380px;
  overflow-y: auto;
  background-color: #ffffff !important;
  border: 1px solid #E0E0E6;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(13,13,18,.16);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10000;
}
.tse-nav-dropdown-panel.tse-abierto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tse-nav-dropdown-panel a,
.tse-nav-dropdown-panel a:visited {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  background-color: #ffffff !important;
  color: #6B6B80 !important;
  text-decoration: none !important;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color .15s;
}
.tse-nav-dropdown-panel a:hover,
.tse-nav-dropdown-panel a:focus {
  background-color: #ffffff !important;
  color: #C8102E !important;
}

/* ── Acordeón "Guías" en el menú móvil ── */
.tse-mobile-dropdown {
  border-bottom: 1px solid #F2F2F5;
}
.tse-mobile-dropdown-toggle,
.tse-mobile-dropdown-toggle:hover,
.tse-mobile-dropdown-toggle:focus,
.tse-mobile-dropdown-toggle:focus-visible,
.tse-mobile-dropdown-toggle:active,
.tse-mobile-dropdown-toggle[aria-expanded="true"] {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent !important;
  /* Color fijo en TODOS los estados — nunca cambia. */
  color: #0D0D12 !important;
}
.tse-mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tse-mobile-dropdown-toggle .tse-chevron {
  font-size: 12px;
  color: #A0A0B0;
  transition: transform .2s ease;
}
.tse-mobile-dropdown-toggle[aria-expanded="true"] .tse-chevron {
  transform: rotate(180deg);
}
.tse-mobile-dropdown-panel {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff !important;
  transition: max-height .25s ease;
}
.tse-mobile-dropdown-panel.tse-abierto {
  max-height: 60vh;
  overflow-y: auto;
}
.tse-mobile-dropdown-panel a,
.tse-mobile-dropdown-panel a:visited {
  display: block;
  padding: 12px 24px 12px 36px;
  background-color: #ffffff !important;
  color: #0D0D12 !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid #F2F2F5;
}
.tse-mobile-dropdown-panel a:last-child {
  border-bottom: none;
}
.tse-mobile-dropdown-panel a:active,
.tse-mobile-dropdown-panel a:hover,
.tse-mobile-dropdown-panel a:focus {
  color: #C8102E !important;
  background-color: #ffffff !important;
}