/* Oxsia — tema de la pantalla de login de Wiki.js.
 *
 * Wiki.js 2 NO inyecta injectCSS/injectHead en /login (comprobado: el
 * theme-color de esa página sigue siendo el suyo, #1976d2). Por eso esta hoja
 * se sirve desde el edge y se engancha con sub_filter en el vhost
 * wiki.oxsia.net. El resto del wiki se sigue tematizando por GraphQL.
 *
 * Revisar tras cada actualización de Wiki.js: las clases .login-* y las de
 * Vuetify (.v-btn.blue.darken-2, .v-input__slot.white) podrían cambiar.
 */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800&family=Unbounded:wght@700;800&display=swap");

:root {
  --oxsia-ink: #0a0a0c;
  --oxsia-ink-2: #121218;
  --oxsia-ink-3: #1c1c26;
  --oxsia-ink-4: #2a2a38;
  --oxsia-paper: #f4efe8;
  --oxsia-paper-dim: #b9b2c4;
  --oxsia-magenta: #ff3d9a;
  --oxsia-magenta-hot: #ff6bb5;
  --oxsia-cyan: #48dbfb;
}

.login {
  background-color: var(--oxsia-ink) !important;
  background-size: cover !important;
  background-position: center center !important;
  font-family: Figtree, system-ui, sans-serif !important;
}

/* Panel lateral: de blanco translúcido a tinta. */
.login-sd {
  background: rgba(10, 10, 12, 0.9) !important;
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255, 61, 154, 0.45) !important;
  border-right: 1px solid rgba(255, 61, 154, 0.45) !important;
}
.login-sd,
.login-sd .v-alert,
.login-sd .body-2,
.login-sd .text-subtitle-1 {
  color: var(--oxsia-paper) !important;
}
.login-sd .grey--text,
.login-sd .text--darken-1,
.login-sd .caption {
  color: var(--oxsia-paper-dim) !important;
}

/* El monograma ya trae su propio fondo de tinta. */
.login-logo,
.login-logo .v-avatar {
  background-color: transparent !important;
  border-radius: 0.2rem !important;
}

.login-title,
.login-title .text-h6,
.login-title .text-h6.grey--text,
.login-sd .login-title .grey--text {
  font-family: Unbounded, Impact, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  color: var(--oxsia-paper) !important;
  text-shadow: none !important;
}

.login-subtitle {
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 61, 154, 0.35) !important;
}

/* Campos: fondo oscuro, texto claro, iconos cyan. */
.login-form .v-input__slot,
.login-form .v-input__slot.white,
.login-form .white {
  background-color: var(--oxsia-ink-3) !important;
  border: 1px solid var(--oxsia-ink-4) !important;
  border-radius: 0.2rem !important;
}
.login-form input {
  color: var(--oxsia-paper) !important;
  caret-color: var(--oxsia-magenta) !important;
}
.login-form input::placeholder,
.login-form label {
  color: var(--oxsia-paper-dim) !important;
}
.login-form .v-icon {
  color: var(--oxsia-cyan) !important;
}
.login-form .v-input__slot:focus-within {
  border-color: var(--oxsia-cyan) !important;
}

/* Botón principal: magenta con sombra dura cyan, como en oxsia.net. */
.login .v-btn.blue,
.login .v-btn.blue.darken-2,
.login .v-btn.primary {
  background-color: var(--oxsia-magenta) !important;
  border: 2px solid var(--oxsia-paper) !important;
  border-radius: 0.2rem !important;
  color: var(--oxsia-ink) !important;
  font-family: Figtree, system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 5px 5px 0 var(--oxsia-cyan) !important;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.login .v-btn.blue:hover,
.login .v-btn.blue.darken-2:hover,
.login .v-btn.primary:hover {
  background-color: var(--oxsia-magenta-hot) !important;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--oxsia-cyan) !important;
}
.login .v-btn:focus-visible {
  outline: 3px solid var(--oxsia-cyan) !important;
  outline-offset: 3px;
}

/* Enlaces secundarios ("¿Olvidaste tu contraseña?"). */
.login a,
.login .v-btn--text {
  color: var(--oxsia-cyan) !important;
}
.login a:hover {
  color: var(--oxsia-magenta-hot) !important;
}

@media (prefers-reduced-motion: reduce) {
  .login * {
    transition: none !important;
  }
}