:root{
  /* Colores base de tu sitio */
  --forum-gray:#6b6b6b;          /* gris principal del menú */
  --forum-gray-900:#555;         /* un poco más oscuro */
  --forum-gray-100:#f4f5f7;      /* fondos suaves */
  --forum-accent:#6b6b6b;        /* botones / focos (mismo gris) */
  --strip-url:url("../../public/images/forum/Forum-DataArtStrip.svg"); /* ajusta si cambia la ruta */
}

/* Fondo general del login */
body{
  background: linear-gradient(180deg, #f6f7fb 0%, #f1f3f8 100%);
  min-height:100vh;
}

/* Topbar del color del menú */
.login-topbar{
  height: 56px;
  background: var(--forum-gray);
  display:flex;
  align-items:center;
  padding:0 20px;
  color:#fff;
}
.login-topbar .brand{
  display:flex; align-items:center; gap:12px;
  font-weight:700; letter-spacing:.5px;
}
.login-topbar .brand img{
  height:26px;
  filter: brightness(0) invert(1); /* logo claro sobre gris */
}

/* Contenedor centrado */
.auth{
  background: transparent !important;
}

/* Tarjeta de login */
.login-card{
  border:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  background:#fff;
}

/* Hero con la franja colorida */
.login-hero{
  background-image: var(--strip-url);
  background-size: cover;
  background-repeat: repeat-x;
  background-position: center;
  height: 84px;
  position:relative;
}
/* Cinta inferior para integrarlo al gris del menú */
.login-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:10px; background: var(--forum-gray);
}

/* Área de formulario */
.login-body{
  padding: 28px 28px 32px 28px;
}

/* Títulos */
.login-title{
  margin: 4px 0 2px;
  font-weight: 800;
  color: var(--forum-gray-900);
}
.login-sub{
  margin:0 0 18px;
  color:#6c757d;
  font-weight:400;
}

/* Inputs con borde suave y focus con el gris del menú */
.form-control{
  border-radius: 12px !important;
  border-color:#e6e8eb;
  background:#fff;
}
.form-control:focus{
  border-color: var(--forum-accent);
  box-shadow: 0 0 0 .2rem rgba(107,107,107,.15);
}

/* Botón principal con el mismo gris del menú */
.btn-forum{
  background: var(--forum-accent);
  border-color: var(--forum-accent);
  color:#fff;
  border-radius: 12px;
  height: 48px;
  font-weight:700;
  letter-spacing:.4px;
}
.btn-forum:hover{ filter: brightness(1.05); }

/* Password toggle */
.password-wrap{
  position:relative;
}
.password-toggle{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; padding:6px; cursor:pointer; color:#6b7280;
}

/* Alertas más compactas */
.alert{
  border-radius:12px;
}

/* Mensajes debajo del formulario */
.login-foot{
  font-size:.875rem; color:#6c757d; margin-top:18px;
}

/* Responsive ancho */
@media (min-width: 992px){
  .login-container{ max-width: 420px; }
}


.password-wrap {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  color: #6c757d; /* gris */
  display: flex;
  align-items: center;
  justify-content: center;
}
.password-toggle:hover {
  color: #000;
}