/* =========================================================================
 * Barra del rediseño (template-parts/header/site-header-rediseno.php).
 * Menú a la izquierda, logo al centro y acceso a la derecha (Lucky en celular).
 * Todo va bajo #header-primary para ganarle a estilos.css y a Twenty Twenty-One.
 * ====================================================================== */

/* Las mismas fuentes que el footer nuevo (assets/fonts/montserrat) */
@font-face {
  font-family: 'montserrat-bold';
  src: url('../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
  font-display: swap;
}

#header-primary {
  --amarillo_oficial: #ffff00;
  --azul_noche: #001e6e;
  --degradado_corporativo: linear-gradient(90deg, #003296 0%, #00a0ff 100%);

  background: var(--degradado_corporativo);
  transition: box-shadow 0.2s ease;
}

/* Al bajar, pagina.js del tema le agrega navbar-fixed-top: solo gana sombra, no se achica */
#header-primary.navbar-fixed-top {
  box-shadow: 0 6px 18px rgba(0, 20, 70, 0.25);
}

#header-primary .center {
  max-width: none;
  padding: 0 32px;
}

/* Tres columnas: las de los lados del mismo ancho, así el logo queda en el centro exacto */
#header-primary .ctn-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0;
}

/* El contenido empieza justo bajo la barra: estilos-home.css del tema lo deja en 76 y 53 px */
body #home .ctn-carousel-ppal {
  margin-top: 64px !important;
}

#header-primary .ctn-header > div {
  float: none;
  width: auto;
  padding: 0;
}

/* ---- Menú: tres rayas, sin texto ---- */

#header-primary .ctn-nav {
  justify-self: start;
}

#header-primary .su-barra__menu,
#header-primary .su-barra__menu:hover,
#header-primary .su-barra__menu:focus,
#header-primary .su-barra__menu:active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-left: -9px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
}

#header-primary .su-barra__menu:focus-visible {
  outline: 2px solid var(--amarillo_oficial);
  outline-offset: 2px;
}

/* Tres rayas en SVG: se dibujan iguales en cualquier densidad de pantalla
   (con cajas de 3,5 px el navegador redondeaba cada raya distinto) */
#header-primary .su-barra__rayas {
  display: block;
  width: 28px;
  height: 24px;
  overflow: visible;
  transition: transform 0.2s ease;
}

#header-primary .su-barra__blanco rect {
  fill: #fff;
}

/* Copia amarilla encima: con el mouse crece de izquierda a derecha, una raya tras otra */
#header-primary .su-barra__amarillo rect {
  fill: var(--amarillo_oficial);
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0.3s ease;
}

#header-primary .su-barra__amarillo rect:nth-child(2) {
  transition-delay: 0.06s;
}

#header-primary .su-barra__amarillo rect:nth-child(3) {
  transition-delay: 0.12s;
}

/* Crecen con el mouse encima, como el logo y los botones */
#header-primary .su-barra__menu:hover .su-barra__rayas,
#header-primary .su-barra__menu:focus-visible .su-barra__rayas {
  transform: scale(1.12);
}

/* es-activo: el menú está abierto (lo pone el script de site-header-rediseno.php) */
#header-primary .su-barra__menu:hover .su-barra__amarillo rect,
#header-primary .su-barra__menu:focus-visible .su-barra__amarillo rect,
#header-primary .su-barra__menu.es-activo .su-barra__amarillo rect {
  transform: scaleX(1);
}

/* ---- Logo ---- */

/* Sin el recuadro oscuro que Twenty Twenty-One pinta en los enlaces con foco */
#header-primary .ctn-logo a,
#header-primary .ctn-logo a:focus,
#header-primary .ctn-logo a:active {
  display: block;
  outline: none;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Twenty Twenty-One también le pone un punteado a la imagen de un enlace con foco */
#header-primary .ctn-logo a:focus img {
  outline: none;
}

/* Con teclado sí se marca, para saber dónde está el foco */
#header-primary .ctn-logo a:focus-visible img {
  outline: 2px solid var(--amarillo_oficial);
  outline-offset: 4px;
}

#header-primary .ctn-logo img {
  display: block;
  width: auto;
  max-width: none;
  height: 44px;
  max-height: none;
  margin: 0 auto;
  transition: transform 0.2s ease;
}

#header-primary .ctn-logo a:hover img {
  transform: scale(1.06);
}

/* ---- Acceso: botones en escritorio ---- */

#header-primary .ctn-ingreso {
  justify-self: end;
}

#header-primary .su-acceso {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Los dos del mismo ancho, del tamaño del más largo */
#header-primary .su-acceso__botones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

#header-primary a.su-nav__ingresar,
#header-primary a.su-nav__ingresar:visited,
#header-primary a.su-nav__registro,
#header-primary a.su-nav__registro:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border: 2px solid var(--amarillo_oficial);
  border-radius: 999px;
  background-color: var(--amarillo_oficial);
  color: var(--azul_noche);
  /* El archivo ya es negrita: con 700 el navegador la engrosaría más */
  font-family: 'montserrat-bold', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

#header-primary a.su-nav__registro,
#header-primary a.su-nav__registro:visited {
  border-color: #fff;
  background-color: #fff;
}

/* Sin el subrayado punteado que Twenty Twenty-One pone a los enlaces con foco */
#header-primary a.su-nav__ingresar:hover,
#header-primary a.su-nav__ingresar:focus,
#header-primary a.su-nav__registro:hover,
#header-primary a.su-nav__registro:focus {
  color: var(--azul_noche);
  text-decoration: none;
  outline: none;
}

#header-primary a.su-nav__ingresar:hover,
#header-primary a.su-nav__ingresar:focus-visible,
#header-primary a.su-nav__registro:hover,
#header-primary a.su-nav__registro:focus-visible {
  transform: scale(1.05);
}

#header-primary a.su-nav__ingresar:focus-visible,
#header-primary a.su-nav__registro:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---- Celular y tablet: Lucky con flecha y desplegable ---- */

#header-primary .su-nav__usuario {
  display: none;
}

#header-primary .su-nav__usuario-boton,
#header-primary .su-nav__usuario-boton:hover,
#header-primary .su-nav__usuario-boton:focus,
#header-primary .su-nav__usuario-boton:active {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: #fff;
  line-height: 1;
  outline: none;
  box-shadow: none;
}

#header-primary .su-nav__usuario-boton:focus-visible {
  outline: 2px solid var(--amarillo_oficial);
  outline-offset: 2px;
}

#header-primary .su-nav__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.2s ease;
}

#header-primary .su-nav__usuario-boton:hover .su-nav__avatar {
  transform: scale(1.06);
}

/* El Lucky completo, sin recortes ni acercamiento */
#header-primary .su-nav__avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

#header-primary .su-nav__flecha {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

#header-primary .su-nav__usuario.open .su-nav__flecha {
  transform: rotate(180deg);
}

/* Con el degradado de la barra, para que se vea salir de ella */
#header-primary .su-nav__menu.dropdown-menu {
  left: auto;
  right: 0;
  min-width: 210px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  background: var(--degradado_corporativo);
  background-origin: border-box;
  box-shadow: 0 12px 30px rgba(0, 30, 110, 0.35);
}

#header-primary .su-nav__menu > li + li {
  margin-top: 10px;
}

#header-primary .su-nav__menu a.su-nav__ingresar,
#header-primary .su-nav__menu a.su-nav__registro {
  padding: 9px 18px;
}

/* ---- Pestaña "Resultados", bajo la barra a la izquierda (solo desde 768 px) ----
   Con #home delante: el tema ya tiene una regla con ese id para .btn-res */

#home .ctn-carousel-ppal .ctn-dest a.btn-res {
  background-color: #ffff00;
  color: #001e6e;
  font-family: 'montserrat-bold', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 8px 30px 9px 32px;
  border-radius: 0 0 22px 0;
  box-shadow: 0 6px 14px rgba(0, 20, 70, 0.25);
  text-decoration: none;
  transform-origin: left top;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#home .ctn-carousel-ppal .ctn-dest a.btn-res:hover,
#home .ctn-carousel-ppal .ctn-dest a.btn-res:focus-visible {
  color: #001e6e;
  text-decoration: none;
  transform: scale(1.05);
  box-shadow: 0 8px 18px rgba(0, 20, 70, 0.32);
}

/* ---- Tamaños ---- */

@media (max-width: 991px) {
  #header-primary .su-acceso__botones {
    display: none;
  }

  #header-primary .su-nav__usuario {
    display: block;
  }
}

/* Tablet: 56 px */
@media (min-width: 768px) and (max-width: 1199px) {
  #header-primary .ctn-header {
    height: 56px;
  }

  body #home .ctn-carousel-ppal {
    margin-top: 56px !important;
  }

  #header-primary .ctn-logo img {
    height: 40px;
  }

  #header-primary .su-barra__rayas {
    width: 26px;
    height: auto;
  }
}

/* Celular: 50 px */
@media (max-width: 767px) {
  #header-primary .center {
    padding: 0 14px;
  }

  #header-primary .ctn-header {
    height: 50px;
    gap: 10px;
  }

  #header-primary .ctn-logo img {
    height: 34px;
  }

  #header-primary .su-barra__menu,
  #header-primary .su-barra__menu:hover,
  #header-primary .su-barra__menu:focus,
  #header-primary .su-barra__menu:active {
    width: 46px;
    height: 46px;
    margin-left: -7px;
  }

  #header-primary .su-barra__rayas {
    width: 24px;
    height: auto;
  }

  #header-primary .su-nav__avatar {
    width: 36px;
    height: 36px;
  }

  #header-primary .su-nav__flecha {
    width: 16px;
    height: 16px;
  }
}