/* ============================================
   FORMS.CSS - Estilos para Formularios de Autenticación
   (Login, Register, Password Reset)
   ============================================ */

/* ============================================
   1. ESTILOS BASE DEL BODY
   ============================================ */

/* Body - Login y Password Reset */
body.page-template-page-login,
body.page-template-page-password-reset {
  height: 100dvh;
  height: 100vh; /* Fallback para navegadores que no soportan dvh */
  width: 100%;
  overflow: hidden;
  color: #e5e7eb;
}

/* Body - Register */
body.page-template-page-register {
  height: 100dvh;
  height: 100vh; /* Fallback para navegadores que no soportan dvh */
  width: 100%;
  overflow: hidden;
  color: #e5e7eb;
}

/* ============================================
   2. OCULTAR ELEMENTOS EN PÁGINAS DE FORMULARIOS
   ============================================ */

body.page-template-page-login #sidebar,
body.page-template-page-login #menu-toggle,
body.page-template-page-login #header-container,
body.page-template-page-password-reset #sidebar,
body.page-template-page-password-reset #menu-toggle,
body.page-template-page-password-reset #header-container,
body.page-template-page-register #sidebar,
body.page-template-page-register #menu-toggle,
body.page-template-page-register #header-container {
  display: none !important;
}

/* ============================================
   3. CONTENEDOR PRINCIPAL (MAIN CONTAINER)
   ============================================ */

/* Main Container - Login y Password Reset */
body.page-template-page-login #main-container,
body.page-template-page-password-reset #main-container {
  background: radial-gradient(120% 120% at 50% 0%, rgba(0, 230, 161, 0.12) 0%, rgba(33, 35, 42, 0.95) 45%, #21232A 100%);
  height: 100dvh;
  height: 100vh; /* Fallback para navegadores que no soportan dvh */
  align-items: center;
  justify-content: center;
  padding: 24px;
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition: height 0.2s ease, top 0.2s ease;
  box-sizing: border-box;
}

/* Main Container - Register */
body.page-template-page-register #main-container {
  background: radial-gradient(120% 120% at 50% 0%, rgba(0, 230, 161, 0.12) 0%, rgba(33, 35, 42, 0.95) 45%, #21232A 100%);
  height: 100dvh;
  height: 100vh; /* Fallback para navegadores que no soportan dvh */
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* ============================================
   4. CONTENEDOR DE CONTENIDO (PRINCIPAL CONTAINER)
   ============================================ */

/* Principal Container - Login y Password Reset */
body.page-template-page-login #principal-container,
body.page-template-page-password-reset #principal-container {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  height: auto;
  max-height: 100%;
  padding: 24px 0;
  /* Ocultar scrollbar pero mantener funcionalidad de scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

/* Principal Container - Register */
body.page-template-page-register #principal-container {
  width: 100%;
  max-width: 660px;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 0;
  /* Ocultar scrollbar pero mantener funcionalidad de scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

/* Ocultar scrollbar en navegadores WebKit (Chrome, Safari, Edge) */
body.page-template-page-login #principal-container::-webkit-scrollbar,
body.page-template-page-password-reset #principal-container::-webkit-scrollbar,
body.page-template-page-register #principal-container::-webkit-scrollbar {
  display: none;
}

/* Contenido Principal Container */
body.page-template-page-login #contenido-principal-container,
body.page-template-page-password-reset #contenido-principal-container,
body.page-template-page-register #contenido-principal-container {
  padding: 0;
  width: 100%;
}

/* ============================================
   5. LOGO
   ============================================ */

/* Logo - Login y Password Reset */
body.page-template-page-login .login-logo,
body.page-template-page-password-reset .login-logo {
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
}

body.page-template-page-login .login-logo img,
body.page-template-page-password-reset .login-logo img {
  width: 75px;
  height: 75px;
  display: block;
}

/* Logo - Register */
body.page-template-page-register .login-logo {
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
}

body.page-template-page-register .login-logo img {
  width: 75px;
  height: 75px;
  display: block;
}

/* ============================================
   6. WRAPPER DE FORMULARIO
   ============================================ */

/* Stripe Payment Elements */
#pms-stripe-payment-elements.StripeElement {
  background: rgba(33, 35, 42, 0.85);
}

/* Wrapper principal del formulario */
.login-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(33, 35, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 32px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Wrapper específico para Register */
body.page-template-page-register .login-wrapper {
  gap: 24px;
  padding: 36px 32px;
}

/* ============================================
   7. HEADER DEL FORMULARIO
   ============================================ */

.login-wrapper__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

/* Header específico para Register */
body.page-template-page-register .login-wrapper__header {
  gap: 8px;
}

/* Badge */
.login-wrapper__badge {
  align-self: center;
  padding: 6px 14px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Badge específico para Register */
body.page-template-page-register .login-wrapper__badge {
  margin-bottom: 12px;
}

/* Título */
.login-wrapper__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #e5e7eb;
  letter-spacing: 0.02em;
}

/* Título específico para Register */
body.page-template-page-register .login-wrapper__title {
  font-size: 26px;
  letter-spacing: 0.01em;
}

/* Subtítulo */
.login-wrapper__subtitle {
  margin: 0;
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.5;
}

/* Subtítulo específico para Register */
body.page-template-page-register .login-wrapper__subtitle {
  font-size: 15px;
  line-height: 1.55;
}

/* ============================================
   8. ESTRUCTURA DEL FORMULARIO
   ============================================ */

.login-wrapper__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Form específico para Register */
body.page-template-page-register .login-wrapper__form {
  gap: 20px;
}

/* Estilos de formularios PMS */
.login-wrapper .pms-login,
.login-wrapper .pms-register {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.page-template-page-register .login-wrapper .pms-register {
  gap: 20px;
}

.login-wrapper .pms-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grupos de campos específicos para Register */
.login-wrapper .pms-form__group,
.login-wrapper .pms-form__fields,
.login-wrapper .pms-form__fieldset {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================
   9. LABELS
   ============================================ */

.login-wrapper label {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
}

/* ============================================
   10. INPUTS Y CAMPOS DE ENTRADA
   ============================================ */

/* Inputs - Login y Password Reset */
.login-wrapper input[type="text"],
.login-wrapper input[type="password"],
.login-wrapper input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(33, 35, 42, 0.65);
  color: #e5e7eb;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Inputs - Register (incluye más tipos) */
body.page-template-page-register .login-wrapper input[type="text"],
body.page-template-page-register .login-wrapper input[type="password"],
body.page-template-page-register .login-wrapper input[type="email"],
body.page-template-page-register .login-wrapper input[type="tel"],
body.page-template-page-register .login-wrapper input[type="number"],
body.page-template-page-register .login-wrapper select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   11. ESTADOS DE FOCUS
   ============================================ */

/* Focus - Login y Password Reset */
.login-wrapper input[type="text"]:focus,
.login-wrapper input[type="password"]:focus,
.login-wrapper input[type="email"]:focus {
  outline: none;
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

/* Focus - Register */
body.page-template-page-register .login-wrapper input[type="text"]:focus,
body.page-template-page-register .login-wrapper input[type="password"]:focus,
body.page-template-page-register .login-wrapper input[type="email"]:focus,
body.page-template-page-register .login-wrapper input[type="tel"]:focus,
body.page-template-page-register .login-wrapper input[type="number"]:focus,
body.page-template-page-register .login-wrapper select:focus {
  outline: none;
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

/* ============================================
   12. PLANES DE SUSCRIPCIÓN (Register)
   ============================================ */

.login-wrapper .pms-subscription-plans {
  display: grid;
  gap: 16px;
}

.login-wrapper .pms-subscription-plan,
.login-wrapper .pms-subscription-plan-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.login-wrapper .pms-subscription-plan:hover {
  border-color: rgba(16, 185, 129, 0.45);
  transform: translateY(-2px);
}

.login-wrapper .pms-field-description {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
}

/* ============================================
   13. BOTONES
   ============================================ */

.login-wrapper button,
.login-wrapper input[type="submit"] {
  border: none;
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Botones específicos para Register */
body.page-template-page-register .login-wrapper button,
body.page-template-page-register .login-wrapper input[type="submit"] {
  padding: 12px 18px;
  font-size: 16px;
}

.login-wrapper button:hover,
.login-wrapper input[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.login-wrapper input[type="submit"]:active {
  transform: translateY(0);
}

/* ============================================
   14. FOOTER DEL FORMULARIO
   ============================================ */

.login-wrapper__footer {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.85);
  text-align: center;
  line-height: 1.4;
}

/* Footer específico para Register */
body.page-template-page-register .login-wrapper__footer {
  font-size: 12px;
  line-height: 1.5;
}

.login-wrapper__footer a {
  color: #10b981;
  text-decoration: none;
  font-weight: 500;
}

.login-wrapper__footer a:hover,
.login-wrapper .login-extra .register:hover,
.login-wrapper .login-extra .lostpassword:hover {
  text-decoration: underline;
}

.login-wrapper .login-extra .register,
.login-wrapper .login-extra .lostpassword {
  color: #10b981;
  text-decoration: none;
}

/* ============================================
   15. MENSAJES DE ÉXITO Y ERROR
   ============================================ */

/* Mensajes de éxito */
.login-wrapper .pms-login__success,
.login-wrapper .pms-login__message,
.login-wrapper .pms-register__success,
.login-wrapper .pms-register__message {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34d399;
}

/* Mensajes específicos para Register */
body.page-template-page-register .login-wrapper .pms-register__success,
body.page-template-page-register .login-wrapper .pms-register__message {
  padding: 12px 14px;
}

/* Mensajes de error */
.login-wrapper .pms-register__errors {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}

.login-wrapper .pms-field-error {
  margin-top: 6px;
  font-size: 12px;
  color: #f87171;
}

/* ============================================
   16. LINKS Y NAVEGACIÓN
   ============================================ */

/* Links del login */
.login-wrapper .pms-login__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -10px;
}

.login-wrapper .pms-login__links a {
  font-size: 13px;
  color: #38bdf8;
  text-decoration: none;
  text-align: center;
}

.login-wrapper .pms-login__links a:hover {
  text-decoration: underline;
}

/* Política de privacidad */
.login-wrapper .pms-privacy-policy,
.login-wrapper .pms-privacy-policy a {
  font-size: 12px;
  color: #94a3b8;
}

/* ============================================
   17. RESPONSIVE - MEDIA QUERIES
   ============================================ */

/* Media Query - Login y Password Reset (640px) */
@media (max-width: 640px) {
  body.page-template-page-login #main-container,
  body.page-template-page-password-reset #main-container {
    padding: 0 24px;
  }

  .login-wrapper {
    padding: 28px 20px;
    gap: 18px;
  }

  .login-wrapper__title {
    font-size: 20px;
  }

  .login-wrapper__subtitle {
    font-size: 13px;
  }

  .login-wrapper .login-extra .register,
  .login-wrapper .login-extra .lostpassword {
    font-size: 13px;
  }

  .login-wrapper input[type="text"],
  .login-wrapper input[type="password"],
  .login-wrapper input[type="email"] {
    font-size: 16px;
    padding: 14px 16px;
    min-height: 48px;
  }

  .login-wrapper input[type="text"]:focus,
  .login-wrapper input[type="password"]:focus,
  .login-wrapper input[type="email"]:focus {
    scroll-margin: 10px 0;
  }
}

/* Media Query - Register (768px) */
@media (max-width: 768px) {
  body.page-template-page-register #main-container {
    padding: 0 20px 0;
    align-items: stretch;
  }

  body.page-template-page-register #principal-container {
    width: 100%;
    padding-bottom: 48px;
  }

  .login-wrapper {
    padding: 32px 24px;
    gap: 20px;
  }

  .login-wrapper__title {
    font-size: 24px;
  }

  .login-wrapper__subtitle {
    font-size: 14px;
  }

  body.page-template-page-register .login-wrapper input[type="text"],
  body.page-template-page-register .login-wrapper input[type="password"],
  body.page-template-page-register .login-wrapper input[type="email"],
  body.page-template-page-register .login-wrapper input[type="tel"],
  body.page-template-page-register .login-wrapper input[type="number"],
  body.page-template-page-register .login-wrapper select {
    font-size: 16px;
    padding: 14px 16px;
    min-height: 48px;
  }

  body.page-template-page-register .login-wrapper input[type="text"]:focus,
  body.page-template-page-register .login-wrapper input[type="password"]:focus,
  body.page-template-page-register .login-wrapper input[type="email"]:focus,
  body.page-template-page-register .login-wrapper input[type="tel"]:focus,
  body.page-template-page-register .login-wrapper input[type="number"]:focus,
  body.page-template-page-register .login-wrapper select:focus {
    scroll-margin: 10px 0;
  }
}

/* Media Query - Register (520px) */
@media (max-width: 520px) {
  body.page-template-page-register #main-container {
    padding: 0 16px 0;
  }

  body.page-template-page-register #principal-container {
    padding-bottom: 40px;
  }

  .login-wrapper {
    padding: 26px 18px;
    gap: 18px;
  }

  .login-wrapper .pms-subscription-plan,
  .login-wrapper .pms-subscription-plan-details {
    padding: 14px;
  }

  body.page-template-page-register .login-wrapper input[type="text"],
  body.page-template-page-register .login-wrapper input[type="password"],
  body.page-template-page-register .login-wrapper input[type="email"],
  body.page-template-page-register .login-wrapper input[type="tel"],
  body.page-template-page-register .login-wrapper input[type="number"],
  body.page-template-page-register .login-wrapper select {
    font-size: 16px;
    padding: 14px 16px;
    min-height: 48px;
  }

  body.page-template-page-register .login-wrapper input[type="text"]:focus,
  body.page-template-page-register .login-wrapper input[type="password"]:focus,
  body.page-template-page-register .login-wrapper input[type="email"]:focus,
  body.page-template-page-register .login-wrapper input[type="tel"]:focus,
  body.page-template-page-register .login-wrapper input[type="number"]:focus,
  body.page-template-page-register .login-wrapper select:focus {
    scroll-margin: 10px 0;
  }
}