/* =============================================================
   Netcloudify custom theme (login + reset password)
   Fondo blanco, logo grande, paleta azul corporativa
   ============================================================= */

:root {
  --nc-primary:      #0B2545;
  --nc-primary-2:    #13315C;
  --nc-accent:       #4FC3F7;
  --nc-accent-2:     #29B6F6;
  --nc-text:         #1B2A41;
  --nc-text-muted:   #6B7A8F;
  --nc-border:       #E4EBF3;
  --nc-bg-soft:      #F4F8FC;
  --nc-card-shadow:  0 12px 40px -12px rgba(11, 37, 69, 0.18);
}

/* --------- Fondo blanco (login + reset) ---------- */
.login.fullscreen,
.reset_password.fullscreen,
.reset_password.fullHeight {
  background: #FFFFFF;
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(79,195,247,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(11,37,69,0.05), transparent 60%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  color: var(--nc-text);
}

.login .fullscreen-center,
.reset_password .fullscreen-center {
  position: relative;
  z-index: 1;
  padding-top: 20px;
  padding-bottom: 40px;
}

/* --------- Ocultar "Log in to fqdn" (lo sustituye el welcome) ---------- */
.login .fullscreen-body > p:first-child { display: none; }

/* --------- Tarjeta del formulario (login + reset) ---------- */
.login .hero-unit,
.reset_password .hero-unit {
  background: #FFFFFF;
  border: 1px solid var(--nc-border);
  border-radius: 14px;
  box-shadow: var(--nc-card-shadow);
  padding: 34px 36px 30px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

/* --------- LOGO GRANDE ---------- */
.login .company-logo {
  display: block;
  margin: 0 auto 26px;
  max-height: 130px;
  max-width: 85%;
  width: auto;
  height: auto;
}

/* Título de la reset ("Forgot your password?" / nueva contraseña / enviado / caducado) */
.reset_password .hero-unit h2 {
  color: var(--nc-primary);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
  text-align: center;
}

/* Mensaje de los pasos "correo enviado" / "enlace caducado" */
.reset_password .hero-unit > p {
  color: var(--nc-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
  text-align: center;
}

/* Etiquetas de formulario */
.login .form-group .formGroup-label label,
.reset_password .form-group .formGroup-label label {
  color: var(--nc-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Inputs */
.login .form-control,
.reset_password .form-control {
  border: 1px solid var(--nc-border);
  border-radius: 8px;
  padding: 11px 14px;
  background: #FFFFFF;
  color: var(--nc-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login .form-control:focus,
.reset_password .form-control:focus {
  border-color: var(--nc-accent);
  box-shadow: 0 0 0 3px rgba(79,195,247,0.22);
  outline: none;
}

/* Botón principal */
.login .btn.btn--primary,
.reset_password .btn.btn--primary {
  background: linear-gradient(135deg, var(--nc-primary) 0%, var(--nc-primary-2) 100%);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 4px 14px -4px rgba(11,37,69,0.35);
}
.login .btn.btn--primary:hover,
.reset_password .btn.btn--primary:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(11,37,69,0.45);
}
.login .btn.btn--primary:active,
.reset_password .btn.btn--primary:active { transform: translateY(0); }

/* Botones secundarios / textos */
.login .btn.btn--text.btn--secondary,
.login .btn.btn--text.btn--subtle,
.reset_password .btn.btn--text.btn--secondary,
.reset_password .btn.btn--text.btn--subtle {
  color: var(--nc-primary-2);
  text-decoration: none;
}
.login .btn.btn--text.btn--secondary:hover,
.login .btn.btn--text.btn--subtle:hover,
.reset_password .btn.btn--text.btn--secondary:hover,
.reset_password .btn.btn--text.btn--subtle:hover {
  color: var(--nc-accent-2);
  text-decoration: underline;
}

/* Alerta de error */
.login .alert.alert--danger,
.reset_password .alert.alert--danger {
  border-radius: 8px;
  border: 1px solid #F5B7B1;
  background: #FDECEA;
  color: #922B21;
}

/* Separador "or sign in using" */
.login .separator .separator-text {
  color: var(--nc-text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------- Branding Zammad (discreto en fondo blanco) ---------- */
.login .poweredBy,
.reset_password .poweredBy {
  opacity: 0.55;
  font-size: 11px;
  color: var(--nc-text-muted);
  margin-top: 24px;
  padding-bottom: 18px;
  text-align: center;
  transition: opacity 0.2s;
}
.login .poweredBy:hover,
.reset_password .poweredBy:hover { opacity: 0.9; }
.login .poweredBy a,
.reset_password .poweredBy a { color: var(--nc-text-muted); }
.login .poweredBy svg,
.reset_password .poweredBy svg {
  fill: var(--nc-text-muted);
  vertical-align: middle;
}

/* --------- Banner de bienvenida (inyectado por JS) ---------- */
.nc-welcome {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 560px;
  padding: 0 20px;
  color: var(--nc-text);
}
.nc-welcome h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--nc-primary);
}
.nc-welcome p {
  font-size: 15px;
  margin: 0;
  color: var(--nc-text-muted);
  line-height: 1.5;
}

/* --------- Selector de idioma (inyectado por JS) ---------- */
.nc-lang-picker {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  gap: 4px;
  z-index: 10;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 4px 16px -6px rgba(11,37,69,0.12);
}
.nc-lang-picker button {
  background: transparent;
  color: var(--nc-text-muted);
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.nc-lang-picker button:hover {
  color: var(--nc-primary);
  background: var(--nc-bg-soft);
}
.nc-lang-picker button.active {
  background: var(--nc-primary);
  color: #fff;
}

/* --------- Responsive ---------- */
@media (max-width: 640px) {
  .login .hero-unit,
  .reset_password .hero-unit {
    padding: 26px 20px 22px;
    margin: 0 14px;
    max-width: none;
  }
  .login .company-logo {
    max-height: 90px;
    margin-bottom: 20px;
  }
  .nc-welcome {
    padding: 0 14px;
    margin-bottom: 22px;
    margin-top: 60px; /* deja espacio para el picker */
  }
  .nc-welcome h1 { font-size: 24px; }
  .nc-welcome p { font-size: 13px; }
  .nc-lang-picker {
    top: 12px;
    right: 12px;
    padding: 3px;
  }
  .nc-lang-picker button {
    padding: 5px 10px;
    font-size: 11px;
  }
  .login .fullscreen-center,
  .reset_password .fullscreen-center {
    padding-top: 10px;
    padding-bottom: 30px;
  }
  .reset_password .form-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .reset_password .form-controls .btn { width: 100%; text-align: center; }
}

@media (max-width: 380px) {
  .nc-welcome h1 { font-size: 21px; }
  .login .company-logo { max-height: 74px; }
  .nc-lang-picker button { padding: 4px 8px; font-size: 10px; }
}

/* --------- Modo oscuro (respeta preferencia del navegador) ---------- */
html[data-theme="dark"] .login.fullscreen,
html[data-theme="dark"] .reset_password.fullscreen,
html[data-theme="dark"] .reset_password.fullHeight {
  background: #0E1626;
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(79,195,247,0.10), transparent 60%);
  color: #E8F1FA;
}
html[data-theme="dark"] .login .hero-unit,
html[data-theme="dark"] .reset_password .hero-unit {
  background: #182236;
  border-color: rgba(255,255,255,0.08);
  color: #E8F1FA;
}
html[data-theme="dark"] .login .form-control,
html[data-theme="dark"] .reset_password .form-control {
  background: rgba(255,255,255,0.04);
  color: #E8F1FA;
  border-color: rgba(255,255,255,0.14);
}
html[data-theme="dark"] .nc-welcome h1 { color: #FFFFFF; }
html[data-theme="dark"] .nc-welcome p { color: #B0BEC5; }
html[data-theme="dark"] .nc-lang-picker {
  background: rgba(24,34,54,0.85);
  border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .nc-lang-picker button { color: #B0BEC5; }
html[data-theme="dark"] .nc-lang-picker button:hover { color: #fff; background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .nc-lang-picker button.active { background: var(--nc-accent); color: var(--nc-primary); }