/* =========================================================
   Nekon HUB v26.35 · Acceso móvil
   - Barra de invitado clara, equilibrada y legible
   - Login móvil con campos mejor espaciados
   - Candado real para contraseña
   Solo teléfonos/tablets pequeñas; escritorio no cambia.
   ========================================================= */

@media (max-width: 820px) {
  /* Barra inferior para visitantes: dos CTA reales y simétricos. */
  html.nekon-next .arena-guest-auth:not([hidden]) {
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-height: 78px !important;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 24px !important;
    background: rgba(18,12,29,.94) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.34), 0 0 0 1px rgba(153,117,255,.04) inset !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
  }

  html.nekon-next .arena-guest-auth button {
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 10px !important;
    border-radius: 17px !important;
    font-size: clamp(.76rem, 3.6vw, .92rem) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html.nekon-next .arena-guest-auth__login {
    border: 1px solid rgba(255,139,108,.34) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.055)) !important;
    color: #fff8ff !important;
    -webkit-text-fill-color: #fff8ff !important;
  }

  html.nekon-next .arena-guest-auth__register {
    border: 1px solid rgba(255,157,114,.70) !important;
    background: linear-gradient(135deg, #ff745c 0%, #ff9d72 100%) !important;
    color: #1b0c0b !important;
    -webkit-text-fill-color: #1b0c0b !important;
    box-shadow: 0 10px 24px rgba(255,116,92,.22) !important;
  }

  html.nekon-next .arena-guest-auth__logo {
    width: 50px !important;
    height: 50px !important;
    border: 1px solid rgba(100,214,196,.42) !important;
    background: #171020 !important;
    box-shadow: 0 0 0 4px rgba(100,214,196,.08), 0 10px 22px rgba(0,0,0,.24) !important;
  }

  html.nekon-next .arena-guest-auth__logo img {
    width: 42px !important;
    height: 42px !important;
  }

  /* Tema claro: mantiene contraste sin parecer una franja rota. */
  html[data-theme="light"].nekon-next .arena-guest-auth:not([hidden]) {
    border-color: rgba(67,43,78,.12) !important;
    background: rgba(255,252,255,.96) !important;
    box-shadow: 0 18px 48px rgba(50,27,61,.16), 0 0 0 1px rgba(255,255,255,.72) inset !important;
  }

  html[data-theme="light"].nekon-next .arena-guest-auth__login {
    border-color: rgba(93,62,111,.18) !important;
    background: linear-gradient(180deg, #f8f2fa, #f2eaf5) !important;
    color: #26192d !important;
    -webkit-text-fill-color: #26192d !important;
  }

  html[data-theme="light"].nekon-next .arena-guest-auth__register {
    border-color: rgba(224,91,65,.24) !important;
    background: linear-gradient(135deg, #ff745c 0%, #ff9d72 100%) !important;
    color: #24100d !important;
    -webkit-text-fill-color: #24100d !important;
  }

  html[data-theme="light"].nekon-next .arena-guest-auth__logo {
    border-color: rgba(63,173,158,.30) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(63,173,158,.07), 0 9px 20px rgba(68,43,78,.10) !important;
  }

  /* Login: da aire a placeholder/texto respecto del borde izquierdo. */
  html.nekon-next .member-auth-form--login .member-auth-field {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  html.nekon-next .member-auth-form--login .member-auth-field > input,
  html.nekon-next .member-auth-form--login .member-auth-field > .password-field {
    min-width: 0 !important;
  }

  html.nekon-next .member-auth-form--login input,
  html.nekon-next .member-auth-form--login .password-field input {
    padding-left: 14px !important;
  }

  html.nekon-next .member-auth-form--login .member-auth-field--email input {
    padding-left: 14px !important;
    padding-right: 0 !important;
  }

  html.nekon-next .member-auth-form--login .member-auth-field--password .password-field input {
    padding-left: 14px !important;
    padding-right: 46px !important;
  }

  /* Sustituye el símbolo cuadrado por un candado cerrado vectorial. */
  html.nekon-next .member-auth-form--login .member-auth-field--password::before {
    content: "" !important;
    background-color: color-mix(in srgb, var(--brand-accent) 11%, transparent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a990ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
  }
}

@media (max-width: 390px) {
  html.nekon-next .arena-guest-auth:not([hidden]) {
    left: 8px !important;
    right: 8px !important;
    grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr) !important;
    gap: 7px !important;
    padding-inline: 8px !important;
  }
  html.nekon-next .arena-guest-auth__logo {
    width: 46px !important;
    height: 46px !important;
  }
  html.nekon-next .arena-guest-auth__logo img {
    width: 39px !important;
    height: 39px !important;
  }
  html.nekon-next .arena-guest-auth button {
    height: 54px !important;
    min-height: 54px !important;
    padding-inline: 7px !important;
    font-size: .74rem !important;
  }
}