/* MojiBox Login — Dark theme */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:         #0b0b0d;
  --surface:    #141416;
  --surface2:   #1e1e22;
  --border:     #2a2a30;
  --accent:     #7c6cfc;
  --accent-h:   #9080ff;
  --text:       #eae5d8;
  --text-muted: #7a7680;
  --text-dim:   #4a4650;
  --error:      #ff5f5f;
  --warn:       #f0a040;
  --success:    #4eca8b;
  --radius:     14px;
  --radius-sm:  8px;

  /* Teclado móvil */
  --kbd-key-bg:      #2c2c2f;
  --kbd-key-hover:   #3a3a3e;
  --kbd-key-active:  #484852;
  --kbd-key-text:    #f0ede8;
  --kbd-key-border:  #3e3e44;
  --kbd-key-radius:  9px;
  --kbd-gap:         5px;
  --kbd-key-h:       40px;
}

html, body {
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;      /* fallback */
  min-height: 100dvh;     /* móvil */
  padding: calc(1.5rem + env(safe-area-inset-top, 0px))
           calc(1.5rem + env(safe-area-inset-right, 0px))
           calc(1.5rem + env(safe-area-inset-bottom, 0px))
           calc(1.5rem + env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior-y: none;
}

/* -------------------------------------------------------------------------
   Contenedor principal
------------------------------------------------------------------------- */
.mbx-login-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

/* -------------------------------------------------------------------------
   Imagen de acceso
------------------------------------------------------------------------- */
.mbx-mascot {
  width: 144px;       /* +20% respecto a 120px original */
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 20px rgba(124, 108, 252, 0.25));
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Pantallas
------------------------------------------------------------------------- */
.mbx-screen {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: fadeSlideIn 0.2s ease;
}

.mbx-screen[hidden] {
  display: none !important;
}

.mbx-screen--error {
  animation: shake 0.35s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* -------------------------------------------------------------------------
   Encabezado de pantalla
------------------------------------------------------------------------- */
.mbx-screen-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mbx-screen-back-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mbx-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.mbx-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Inputs
------------------------------------------------------------------------- */
.mbx-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mbx-input-group label {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.3rem;
}

.mbx-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}

.mbx-input:focus {
  border-color: var(--accent);
}

.mbx-input::placeholder {
  color: var(--text-dim);
}

/* Input de username: ligeramente más prominente */
.mbx-input--username {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.mbx-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* -------------------------------------------------------------------------
   TECLADO MÓVIL (pantalla de username)
------------------------------------------------------------------------- */
.mbx-mobile-kbd {
  display: flex;
  flex-direction: column;
  gap: var(--kbd-gap);
  user-select: none;
  -webkit-user-select: none;
}

.mbx-kbd-row {
  display: flex;
  gap: var(--kbd-gap);
}

/* Fila de home row ligeramente centrada (A-S-D-F...) */
.mbx-kbd-row--indent {
  padding: 0 5%;
}

.mbx-kbd-key {
  flex: 1;
  height: var(--kbd-key-h);
  background: var(--kbd-key-bg);
  border: 1px solid var(--kbd-key-border);
  border-radius: var(--kbd-key-radius);
  color: var(--kbd-key-text);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.08s, transform 0.06s;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
  padding: 0;
}

.mbx-kbd-key:hover {
  background: var(--kbd-key-hover);
}

.mbx-kbd-key:active {
  background: var(--kbd-key-active);
  transform: scale(0.92);
}

/* Teclas anchas: shift y backspace */
.mbx-kbd-key--wide {
  flex: 1.55;
}

/* Shift */
.mbx-kbd-key--shift {
  font-size: 1rem;
  background: #3a3a40;
  color: var(--text-muted);
}

.mbx-kbd-key--shift.shift-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Backspace en fila de letras */
.mbx-kbd-key--del {
  font-size: 1.1rem;
  background: #3a3a40;
  color: var(--text-muted);
}

/* Backspace en modo símbolos (igual que --del) */
.mbx-kbd-key--del-sym {
  flex: 2;
  font-size: 1.1rem;
  background: #3a3a40;
  color: var(--text-muted);
}

/* Botón de modo símbolos ?!# */
.mbx-kbd-key--sym {
  flex: 1.4;
  background: #3a3a40;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.mbx-kbd-key--sym.sym-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Tecla Continuar / Enter del teclado */
.mbx-kbd-key--enter {
  flex: 3;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  border-color: var(--accent);
}

.mbx-kbd-key--enter:hover {
  background: var(--accent-h);
}

.mbx-kbd-key--enter:disabled {
  background: var(--surface2);
  color: var(--text-dim);
  border-color: var(--border);
  cursor: default;
}

/* Fila inferior del teclado */
.mbx-kbd-row--bottom {
  margin-top: 1px;
}

/* -------------------------------------------------------------------------
   VAULT PAD — pad numérico estilo notes (pantalla de contraseña)
------------------------------------------------------------------------- */
.mbx-vault-display {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  background: #0e0e11;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.mbx-vault-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2e2e36;
  transition: background 0.12s, box-shadow 0.12s;
}

.mbx-vault-dot--filled {
  background: var(--accent);
  box-shadow: 0 0 7px rgba(124, 108, 252, 0.55);
}

.mbx-vault-dot--error {
  background: var(--error);
  box-shadow: 0 0 7px rgba(255, 95, 95, 0.5);
}

.mbx-vault-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  user-select: none;
  -webkit-user-select: none;
}

.mbx-vkey {
  background: var(--kbd-key-bg);
  border: 1px solid var(--kbd-key-border);
  border-radius: var(--kbd-key-radius);
  color: var(--kbd-key-text);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.82rem 0.5rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s, transform 0.07s;
  -webkit-tap-highlight-color: transparent;
}

.mbx-vkey:hover {
  background: var(--kbd-key-hover);
}

.mbx-vkey:active {
  background: var(--kbd-key-active);
  transform: scale(0.93);
}

.mbx-vkey--sym {
  color: var(--accent);
}

.mbx-vkey--del {
  color: var(--text-muted);
  font-size: 1.2rem;
}

.mbx-vkey--enter {
  background: #3a2e6a;
  border-color: var(--accent);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  grid-column: span 3;
  padding: 0.7rem;
  transition: background 0.13s, transform 0.07s, opacity 0.18s;
}

.mbx-vkey--enter:hover:not(:disabled) {
  background: var(--accent);
}

.mbx-vkey--enter:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* Estado error en vault display */
.mbx-screen--error .mbx-vault-display {
  border-color: var(--error);
}

.mbx-screen--error .mbx-vault-dot--filled {
  background: var(--error);
  box-shadow: 0 0 7px rgba(255, 95, 95, 0.5);
}

/* Teclado alternativo (opcional, oculto por defecto) */
.mbx-kbd-alt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mbx-pwd-alt {
  animation: fadeSlideIn 0.2s ease;
}

.mbx-pwd-alt[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Mensajes de error y aviso
------------------------------------------------------------------------- */
.mbx-error {
  font-size: 0.82rem;
  color: var(--error);
  text-align: center;
  min-height: 1.2em;
}

.mbx-error[hidden] {
  display: none;
}

.mbx-warn {
  font-size: 0.8rem;
  color: var(--warn);
  text-align: center;
  padding: 0.4rem 0.5rem;
  background: rgba(240, 160, 64, 0.08);
  border: 1px solid rgba(240, 160, 64, 0.25);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.mbx-warn[hidden] {
  display: none;
}

.mbx-notice {
  font-size: 0.85rem;
  color: var(--success);
  text-align: center;
}

.mbx-notice[hidden] {
  display: none;
}

/* -------------------------------------------------------------------------
   Botones y links
------------------------------------------------------------------------- */
.mbx-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.mbx-btn:hover {
  background: var(--accent-h);
}

.mbx-btn:disabled {
  background: var(--surface2);
  color: var(--text-dim);
  cursor: not-allowed;
}

.mbx-btn--next {
  margin-top: 0.9rem;
}

.mbx-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mbx-link:hover {
  color: var(--accent-h);
}

.mbx-link--back {
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mbx-link--back:hover {
  color: var(--text);
}

.mbx-link--sm {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
}

.mbx-link--sm:hover {
  color: var(--accent);
  text-decoration: underline;
}

.mbx-footer-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
   Remember me
------------------------------------------------------------------------- */
.mbx-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
}

.mbx-remember input[type=checkbox] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

/* -------------------------------------------------------------------------
   Registro — pasos
------------------------------------------------------------------------- */
.reg-step[hidden] {
  display: none;
}

.reg-step-indicator {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Ocultar botón submit del registro cuando hay teclado activo en el paso username */
.reg-step[data-step="username"] ~ [data-reg-submit] {
  display: none;
}

/* -------------------------------------------------------------------------
   Divider
------------------------------------------------------------------------- */
.mbx-divider {
  border: none;
  border-top: 1px solid var(--border);
}

/* -------------------------------------------------------------------------
   Mascota pequeña (change_password, recovery)
------------------------------------------------------------------------- */
.mbx-mascot--sm {
  width: 72px;
}

/* -------------------------------------------------------------------------
   PWA / instalación
------------------------------------------------------------------------- */
.mbx-pwa-entry {
  display: flex;
  justify-content: center;
  min-height: 1.5rem;
  margin-top: 0.15rem;
}

.mbx-pwa-install {
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(124, 108, 252, 0.1);
  color: var(--accent-h);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mbx-pwa-install:hover,
.mbx-pwa-install:focus-visible {
  background: rgba(124, 108, 252, 0.2);
  outline: none;
}

.mbx-pwa-status {
  color: var(--success);
  font-size: 0.8rem;
}

.mbx-pwa-dialog {
  width: min(92vw, 390px);
  margin: auto;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.mbx-pwa-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

.mbx-pwa-dialog h2 {
  margin-bottom: 0.85rem;
  font-size: 1.15rem;
}

.mbx-pwa-dialog ol {
  margin: 0 0 0.9rem 1.25rem;
}

.mbx-pwa-dialog li,
.mbx-pwa-dialog p {
  margin-bottom: 0.65rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.mbx-pwa-dialog .mbx-btn,
a.mbx-btn {
  min-height: 44px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body {
    padding: calc(0.75rem + env(safe-area-inset-top, 0px))
             calc(0.75rem + env(safe-area-inset-right, 0px))
             calc(0.75rem + env(safe-area-inset-bottom, 0px))
             calc(0.75rem + env(safe-area-inset-left, 0px));
  }

  .mbx-login-wrap {
    padding-top: 0.5rem;
  }

  .mbx-mascot {
    width: 110px;
  }

  .mbx-screen {
    padding: 1rem 0.85rem;
  }

  :root {
    --kbd-key-h: 44px;
    --kbd-gap: 4px;
    --kbd-key-radius: 7px;
  }

  .mbx-vkey {
    padding: 0.7rem 0.25rem;
  }
}