/*
 * Botón "Comenzar" del header, junto a los íconos de redes sociales —
 * lleva al login del panel admin (route('admin.login')). Mismo verde
 * #18d26e y mismo border-radius de 4px que el botón "Send Message" del
 * formulario de contacto, pero con altura fija de 40px en vez de
 * padding vertical: los íconos de al lado (#header .social-links a en
 * style.css) son círculos de 40x40 exactos, y un botón dimensionado
 * solo por padding queda más alto que ellos y descentrado en la fila
 * (confirmado con captura: el botón sobresalía por abajo). Archivo
 * aparte para no tocar el style.css de BootstrapMade.
 */

#header .social-links {
  align-items: center;
}

/* #header .social-links a en style.css (los íconos circulares) es un
   selector genérico que igual matchea este link — sin estas líneas,
   su `width: 40px` y `margin-right: 8px` seguían aplicando encima de
   lo que sí pisábamos acá, ya que el cascade es propiedad por
   propiedad, no regla completa contra regla completa. */
#header .social-links .btn-cta,
#header .social-links .btn-cta:hover,
#header .social-links .btn-cta:focus,
#header .social-links .btn-cta:active,
#header .social-links .btn-cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  height: 40px;
  margin: 0 0 0 15px;
  padding: 0 24px;
  background: #18d26e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 0;
  border-radius: 4px;
  outline: 0;
  box-shadow: none;
  text-decoration: none;
  transition: 0.3s;
}

#header .social-links .btn-cta:hover,
#header .social-links .btn-cta:focus {
  background: #15bb62;
  color: #fff;
}

/* En el header scrolleado (barra fija de 80px) el resto de
   .social-links se oculta (style.css), así que el botón necesita su
   propia visibilidad para seguir siendo un acceso permanente al panel,
   no solo algo que solo se ve en el hero. `margin-top: 40px` también
   viene heredado del layout de sidebar por defecto (pensado para el
   espacio antes del bloque de íconos cuando está apilado debajo del
   nav) y nunca se resetea para `.header-top` — sin pisarlo a 0, ese
   margen empuja todo el bloque hacia abajo dentro de la fila
   `align-items: center` del header, desalineándolo del resto del menú
   (confirmado con captura: el botón quedaba visiblemente más bajo que
   "Inicio"/"Qué es"/etc.). */
#header.header-top .social-links {
  display: flex;
  margin-top: 0;
}

#header.header-top .social-links > a:not(.btn-cta) {
  display: none;
}

#header.header-top .social-links .btn-cta {
  margin-left: 20px;
}

/* En pantallas angostas style.css apila el .container del header en
   columna (para el hero: título, subtítulo, nav, íconos), y nunca lo
   vuelve a poner en fila para el estado .header-top — así que el título
   y el botón quedaban uno debajo del otro dentro de una barra de 60/80px
   y se recortaban (confirmado con captura en /terms a 390px de ancho).
   En la barra compacta van en una sola fila, dejando lugar a la derecha
   para el toggle del nav móvil (fijo en right: 15px). */
@media (max-width: 992px) {
  #header.header-top .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-right: 60px;
  }

  #header.header-top .social-links .btn-cta {
    margin-left: 10px;
  }
}

@media (max-width: 768px) {
  #header.header-top .social-links .btn-cta {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* Íconos de Bootstrap a la izquierda de cada entrada del menú superior
   (.nav-icon). style.css reserva `.navbar a i` para el chevron de los
   dropdowns (a la derecha, 12px, line-height 0); acá se pisa solo para
   los íconos de menú, dejando el chevron del selector de idioma igual. */
.navbar a i.nav-icon,
.navbar a:focus i.nav-icon,
.navbar .nav-label i.nav-icon,
.navbar .mode-badge i.nav-icon {
  font-size: 14px;
  line-height: 1;
  margin-left: 0;
  margin-right: 6px;
}

/* En el menú móvil los links ocupan todo el ancho con
   justify-content: space-between (pensado para el chevron a la
   derecha): sin esto el ícono quedaría a la izquierda y el texto
   pegado al borde derecho. */
.navbar-mobile a:has(> i.nav-icon),
.navbar-mobile a:focus:has(> i.nav-icon) {
  justify-content: flex-start;
}