/* Contenedor general */
.containerlaravel{
 width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw, 32px);
}

/* Barra */
.topbar{
  width: 100%;
}

/* Inner con tu max-width */
.topbar__inner{
  margin: 0 auto;
  padding: 16px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo izq / acciones der */
  gap: 16px;
}

/* Logo siempre a la izquierda */
.topbar__brand{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.topbar__logo{
  height: 66px;        /* ajusta */
  width: auto;
  display: block;
}

/* Botones a la derecha */
.topbar__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;           /* tu separación en grande */
  flex: 1 1 auto;      /* permite que “respire” y se comprima */
  min-width: 0;        /* importante para que pueda encogerse bien */
}
/* Activo: texto + borde */
.btn-menu-transparente.is-active{
  border-color: var(--Primary-500, #273756);
  color: var(--Primary-500, #273756);
}

/* SVG en activo: hereda el color del botón */
.btn-menu-transparente.is-active svg{
  color: var(--Primary-500, #273756);
}

/* CLAVE: pisa strokes/fills inline de los <path> */
.btn-menu-transparente.is-active svg *{
  stroke: currentColor !important;
  fill: none !important; /* por si acaso */
}

/* Si algún icono usa fill (no stroke), descomenta esto:
.btn-transparente.is-active svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}
*/


/* En pantallas más pequeñas, se van “acercando” (reduce gap) */
@media (max-width: 900px){
  .topbar__actions{ gap: 16px; }
}
@media (max-width: 720px){
  .topbar__actions{ gap: 10px; }
}
@media (max-width: 560px){
  .topbar__actions{ gap: 8px; }
}

/* Opcional: a partir de cierto punto oculta texto y deja solo iconos */
@media (max-width: 520px){
  .topbar__actions a span{ display: none; }
  .topbar__actions a{ padding: 8px 12px; } /* para que sigan “boton” */
}