.header {
    display: flex;
    width: 100%;
    /* QUITAR min-width de aquí */
    justify-content: center;
    min-height: 60px;
    position: sticky; 
    top: 0;
    z-index: 1000;
    align-items: center;
    transition: background-color 0.35s ease, transform 0.55s ease; /* QUITAR min-width de la transición */
    background-color: rgba(0, 0, 0, 1);
    backdrop-filter: blur(5px);
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--borders);
}

/* Contenido interno alineado */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 1920px;
}

/* =============================
   Lado Izquierdo (botón)
   ============================= */
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* =============================
   Logo centrado
   ============================= */
.header-principal-brand {
  position: relative; /* ya no absoluto */
  left: auto;
  transform: none;
  display: flex;
  align-items: center;
}

.header-principal-brand-link {
  display: inline-flex;
  align-items: center;
}

.header-principal-brand-img {
  height: 40px;
  width: auto;
  display: block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* =============================
   Lado Derecho (acciones de usuario)
   ============================= */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.action-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.action-btn:hover {
  color: var(--accent);
}

/* =============================
   Main navigation pegado al logo
   ============================= */
.main-nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-left: 2rem; /* separa un poco del logo */
  font-weight: 700;
  text-transform: uppercase;
}

.main-nav a {
  position: relative;
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: all 0.35s ease;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 0 6px;
}

.main-nav a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
}

/* Estado activo del nav */
.main-nav a.active {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
}

.main-nav a.active::after {
  transform: scaleX(1);
}

/* =============================
   Header solo con logo (login/register)
   ============================= */
header.header--auth .header-inner {
  grid-template-columns: 1fr; /* centrado automático */
  justify-items: center;
}

/* Ocultamos lo que no aplica en auth */
header.header--auth .header-right,
header.header--auth .main-nav,
header.header--auth .header-actions {
  display: none;
}

/* =============================
   Responsive
   ============================= */
@media (max-width: 1024px) {

  .header-principal-brand-img {
    height: 32px;
  }
  .header{
    max-height: 60px;
    min-width: 100vw; /* AGREGAR ESTA LÍNEA */
  }

  /* Tamaño de logo */
  .header-principal-brand-img {
    height: 32px;
  }

    .header{
        max-height: 60px;
    }

  /* === Mantener logo centrado SOLO en auth === */
  header.header--auth .header-inner {
    display: grid;                 /* NO flex */
    grid-template-columns: 1fr;    /* Única columna */
    justify-items: center;         /* Centrado perfecto */
    align-items: center;
  }

  /* Para páginas normales seguimos con su flex */
  header:not(.header--auth) .header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 100%;
  }
}