/* =========================================================
   WP Magic Auth – Estilos
   Diseño: minimalista, con variables CSS para fácil
   personalización via wp_add_inline_style o child theme.
   ========================================================= */

:root {
  --wpma-primary: #0A2540;
  --wpma-primary-hover: rgba(241, 241, 241, 0.50);
  --wpma-accent: #0f3460;
  --wpma-radius: 12px;
  --wpma-input-radius: 8px;
  --wpma-button-radius: 120px;
  --wpma-font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wpma-shadow: 0 4px 24px rgba(0, 0, 0, .10);
  --wpma-transition: 200ms ease;
  --wpma-error: #d63638;
  --wpma-success: #00a32a;
  --wpma-border: #e0e0e8;
  --wpma-bg: #ffffff;
  --wpma-muted: #6b7280;
}

/* ── Contenedor ─────────────────────────────────────── */
.wpma-wrap {
  position: relative;
  margin: 27px auto;
  overflow: hidden;
  font-family: var(--wpma-font);
}

.wpma-container {
  width: 384px;
  margin-left: 120px;
}

.wpma-container h1 {
  color: #0A2540;
  text-align: center;
  font-family: Poppins;
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: 57px;
  letter-spacing: -0.92px;
  margin-bottom: 6px;
}

.wpma-container p {
  color: #2B4B6B;
  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.16px;
}

/* ── Tabs ───────────────────────────────────────────── */
.wpma-tabs {
  display: flex;
  border-bottom: 1px solid var(--wpma-border);
}

.wpma-tab {
  flex: 1;
  padding: 14px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--wpma-muted);
  letter-spacing: .3px;
  transition: color var(--wpma-transition),
    border-color var(--wpma-transition);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.wpma-tab--active,
.wpma-tab:hover {
  color: var(--wpma-primary);
  border-color: var(--wpma-primary);
}

/* ── Panels / Steps ─────────────────────────────────── */
/* .wpma-panel: compatibilidad con template combinado anterior */
.wpma-panel {
  padding: 32px 36px 36px;
}

.wpma-panel--hidden,
.wpma-step--hidden {
  display: none;
}

.wpma-step {
  animation: wpmaFadeIn .25s ease;
}

.wpma-step-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes wpmaFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botón renderizado por Google GSI */
.wpma-google-rendered-btn {
  margin-bottom: 21px;
  display: flex;
  justify-content: center;
}

.wpma-google-rendered-btn iframe {
  border-radius: var(--wpma-button-radius) !important;
}

/* Botón custom (fallback, normalmente oculto) */
.wpma-google-btn {
  min-width: 339px;
  padding: 15px 36px;
  border: 1px solid var(--wpma-primary);
  border-radius: var(--wpma-button-radius);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .4px;
  transition: background var(--wpma-transition),
    transform var(--wpma-transition),
    opacity var(--wpma-transition);
  margin-bottom: 21px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
}

.wpma-google-btn:hover {
  border-color: #aaa;
}

.wpma-google-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── Divider ────────────────────────────────────────── */
.wpma-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--wpma-muted);
  font-size: 13px;
}

.wpma-divider::before,
.wpma-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wpma-border);
}

/* ── Fields ─────────────────────────────────────────── */
.wpma-field {
  margin-bottom: 24px;
  width: 100%;
}

/* Fila de dos campos en línea (tipo doc + número doc) */
.wpma-field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.wpma-field-row .wpma-btn {
  min-width: auto;
}

.wpma-field-row .wpma-field {
  margin-bottom: 0;
  flex: 1;
}

.wpma-field--doc-type {
  flex: 0 0 160px !important;
}

.wpma-field--doc-number {
  flex: 1 !important;
}

.wpma-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wpma-primary);
}

.wpma-input {
  width: 100%;
  padding: 13px 18px;
  border: 0;
  font-size: 16px;
  color: var(--wpma-primary);
  box-sizing: border-box;
  transition: border-color var(--wpma-transition),
    box-shadow var(--wpma-transition);
  outline: none;
  border-bottom: 3px solid #5FE2F9;
  background: rgba(241, 241, 241, 0.50);
}

/* Select */
.wpma-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M15.9133 22.7723C17.5446 22.5455 18.9191 22.092 20.0386 21.4104C21.158 20.7301 22.0313 19.7908 22.6565 18.5952C23.2818 17.3983 23.6786 15.8875 23.8433 14.0626C23.8699 13.7795 23.9053 13.4467 23.9513 13.067C23.9974 12.6859 24.008 12.3169 23.9814 11.96C23.9655 11.7547 23.9301 11.5668 23.8769 11.3951C23.8823 10.9577 23.9035 10.539 23.9407 10.1392C24.0647 8.77857 23.9938 7.51056 23.7317 6.33111C23.4696 5.153 22.9506 4.11444 22.1765 3.21543C21.4025 2.31641 20.3468 1.59184 19.0095 1.04036C17.6722 0.488872 16.0018 0.161468 14.0003 0.056807C11.8376 -0.055905 9.95292 -0.000889447 8.34815 0.221851C6.74514 0.444591 5.39188 0.891411 4.29015 1.56097C3.18841 2.23054 2.33111 3.1537 1.71471 4.33047C1.10007 5.50724 0.446475 6.45465 0.283517 8.24999C0.262261 8.48615 0.163066 9.19541 0.125868 9.5C0.0327002 10.2629 -0.00354135 10.4244 5.68248e-07 11C0.00531442 11.5971 -0.0603308 12.3074 4.80825e-07 13C4.15258e-07 14.5 0.00542488 15.3655 0.272889 16.5637C0.540352 17.762 1.06819 18.818 1.85464 19.7318C2.64109 20.6455 3.71448 21.3822 5.07482 21.9431C6.43517 22.5039 8.13205 22.8367 10.1672 22.9427C12.3672 23.0568 14.2819 23.0004 15.9133 22.775' fill='%23002D72'/%3E%3Cpath d='M14.4749 15.75L19.0609 11.164C19.3421 10.8826 19.5001 10.501 19.5 10.1032C19.4999 9.70531 19.3418 9.32378 19.0604 9.04252C18.779 8.76126 18.3974 8.6033 17.9995 8.60339C17.6017 8.60349 17.2201 8.76163 16.9389 9.04302L12.3539 13.629C12.3074 13.6756 12.2523 13.7125 12.1915 13.7377C12.1308 13.7629 12.0656 13.7759 11.9999 13.7759C11.9341 13.7759 11.869 13.7629 11.8082 13.7377C11.7475 13.7125 11.6923 13.6756 11.6459 13.629L7.06088 9.04302C6.77961 8.76163 6.39809 8.60349 6.00023 8.60339C5.60237 8.6033 5.22077 8.76126 4.93937 9.04252C4.65798 9.32378 4.49984 9.70531 4.49975 10.1032C4.49965 10.501 4.65761 10.8826 4.93887 11.164L9.52487 15.75C10.1819 16.4053 11.072 16.7732 11.9999 16.7732C12.9278 16.7732 13.8178 16.4053 14.4749 15.75Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='white' transform='translate(24 0) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
  color: rgba(43, 75, 107, 0.5);
}

.wpma-select:valid {
  color: var(--wpma-primary);
}

.wpma-input::placeholder {
  color: rgba(43, 75, 107, 0.5);
}

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

/* ── Términos y condiciones ─────────────────────────── */
.wpma-field--terms {
  margin-bottom: 24px;
}

.wpma-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: #2B4B6B;
  font-family: Poppins;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}

.wpma-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--wpma-primary);
  cursor: pointer;
}

.wpma-terms-label a {
  color: var(--wpma-primary);
  font-weight: 600;
  text-decoration: underline;
}

.wpma-terms-label a:hover {
  opacity: .75;
}

/* ── Register Message ─────────────────────────────────────── */
.wpma-register-message {
  display: flex;
  flex-direction: column;
  gap: 21px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ── OTP digits ─────────────────────────────────────── */
.wpma-otp-hint {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--wpma-muted);
  line-height: 1.5;
}

.wpma-otp-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.wpma-otp-digit {
  width: 56px;
  height: 64px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  border: 2px solid var(--wpma-border);
  border-radius: var(--wpma-input-radius);
  color: var(--wpma-primary);
  background: #f9f9fc;
  caret-color: var(--wpma-accent);
  outline: none;
  transition: border-color var(--wpma-transition),
    transform var(--wpma-transition);
}

.wpma-otp-digit:focus {
  border-color: var(--wpma-accent);
  box-shadow: 0 0 0 3px rgba(15, 52, 96, .15);
  background: rgba(241, 241, 241, 0.50);
  transform: scale(1.05);
}

.wpma-otp-digit.is-filled {
  border-color: var(--wpma-primary);
  background: rgba(241, 241, 241, 0.50);
}

/* ── Buttons ────────────────────────────────────────── */
.wpma-btn {
  min-width: 339px;
  padding: 15px 36px;
  border: none;
  border-radius: var(--wpma-button-radius);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .4px;
  transition: background var(--wpma-transition),
    transform var(--wpma-transition),
    opacity var(--wpma-transition);
  margin-bottom: 21px;
  display: flex;
  justify-content: center;
  text-decoration: none;
}

.wpma-btn--primary {
  background: var(--wpma-primary);
  color: #ffffff;
  border: 1px solid var(--wpma-primary);
}

.wpma-btn--primary:hover {
  background: var(--wpma-primary-hover);
  color: var(--wpma-primary);
}

.wpma-btn--secondary {
  background: var(--wpma-bg);
  color: var(--wpma-primary);
  border: 1px solid var(--wpma-primary);
}

.wpma-btn--secondary:hover {
  background: var(--wpma-primary);
  color: var(--wpma-bg);
}

.wpma-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.wpma-btn-link {
  display: block;
  margin-top: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wpma-muted);
  font-size: 13px;
  text-align: center;
  width: 100%;
  padding: 4px;
  transition: color var(--wpma-transition);
}

.wpma-btn-link:hover {
  color: var(--wpma-primary);
}

/* ── Link ───────────────────────────────────────── */
.wpma-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wpma-primary);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}

.wpma-link:hover {
  text-decoration: underline;
}

/* ── Messages ───────────────────────────────────────── */
.wpma-message {
  padding: 10px 14px;
  border-radius: var(--wpma-input-radius);
  font-size: 13px;
  line-height: 1.5;
  display: none;
  margin-bottom: 27px;
}

.wpma-message.is-error {
  display: block;
  background: #fef2f2;
  color: var(--wpma-error);
  border: 1px solid #fecaca;
}

.wpma-message.is-success {
  display: block;
  background: #f0fdf4;
  color: var(--wpma-success);
  border: 1px solid #bbf7d0;
}

.wpma-message.is-info {
  display: block;
  background: #eff6ff;
  color: var(--wpma-accent);
  border: 1px solid #bfdbfe;
}

/* ── Spinner ────────────────────────────────────────── */
.wpma-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .8);
  z-index: 10;
}

.wpma-spinner.is-visible {
  display: flex;
}

.wpma-spinner svg {
  width: 40px;
  height: 40px;
  color: var(--wpma-primary);
  animation: wpmaSpin 1s linear infinite;
}

@keyframes wpmaSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Already-logged ─────────────────────────────────── */
.wpma-already-logged {
  padding: 20px;
  text-align: center;
  color: var(--wpma-muted);
  font-size: 15px;
}

/* ── Honeypot (ocultar visualmente sin display:none) ── */
.wpma-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

.wpma-form-subtitle {
  color: var(--wpma-primary);
  text-align: center;
  font-family: Poppins;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 28px;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 480px) {

  .wpma-panel,
  .wpma-wrap>.wpma-step {
    padding: 24px 20px;
  }

  .wpma-otp-digit {
    width: 48px;
    height: 56px;
    font-size: 24px;
  }

  .wpma-container {
    margin-left: 0;
    width: 100%;
  }

  .wpma-field-row {
    flex-direction: column;
    gap: 0;
  }

  .wpma-field--doc-type {
    flex: unset !important;
  }

  .wpma-field--doc-number {
    flex: unset !important;
  }

  .wpma-field-row .wpma-field {
    margin-bottom: 24px;
  }
}