/**
 * EF — PMPro Styles (MU)
 * Version: 1.1.0
 *
 * Objetivo:
 * - Estilos PMPro aislados.
 * - Login PMPro siempre en light (identidad EF).
 * - Botones unificados con el sistema EF (Academia / sitio principal).
 * - Dark mode preparado, pero NO aplicado al login.
 */

/* ============================================================
   1) Variables base (Light por defecto)
   ============================================================ */
:root {
  --ef-pmpro-surface: #f5f5f7;
  --ef-pmpro-panel: #ffffff;
  --ef-pmpro-text: #1d1d1f;
  --ef-pmpro-border: rgba(0,0,0,0.06);
  --ef-pmpro-shadow: 0 20px 40px rgba(0,0,0,0.18);

  --ef-accent: #da2b1f;     /* rojo corporativo */
  --ef-focus-bg: #fdf5d2;   /* arena suave */
}

/* ============================================================
   2) Auto Dark (preparado, NO aplicado al login)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --ef-pmpro-surface: #111111;
    --ef-pmpro-panel: #1a1a1a;
    --ef-pmpro-text: #f5f5f7;
    --ef-pmpro-border: rgba(255,255,255,0.08);
    --ef-pmpro-shadow: 0 20px 40px rgba(0,0,0,0.45);
  }
}

/* ============================================================
   3) PMPro Login — FORZAR LIGHT MODE (scope exacto)
   ============================================================ */
.pmpro #pmpro_login {
  --ef-pmpro-surface: #f5f5f7;
  --ef-pmpro-panel: #ffffff;
  --ef-pmpro-text: #1d1d1f;
  --ef-pmpro-border: rgba(0,0,0,0.06);
  --ef-pmpro-shadow: 0 20px 40px rgba(0,0,0,0.18);
}

/* ============================================================
   4) PMPro Login — Card
   ============================================================ */
.pmpro #pmpro_login .pmpro_card.pmpro_login_wrap {
  background-color: var(--ef-pmpro-surface) !important;
  background-image: none !important;

  padding: 32px;
  border-radius: 14px;

  border: 1px solid var(--ef-pmpro-border);
  box-shadow: var(--ef-pmpro-shadow);

  max-width: 420px;
  margin: 0 auto;
}

/* Limpieza controlada (sin comodines peligrosos) */
.pmpro #pmpro_login .pmpro_card_content,
.pmpro #pmpro_login .pmpro_card_actions {
  background: transparent !important;
}

/* Texto */
.pmpro #pmpro_login label,
.pmpro #pmpro_login .pmpro_card_actions a {
  color: var(--ef-pmpro-text);
}

/* ============================================================
   5) Inputs PMPro
   ============================================================ */
.pmpro #pmpro_login .pmpro_form input:not(:focus),
.pmpro #pmpro_login .pmpro_form select:not(:focus),
.pmpro #pmpro_login .pmpro_form textarea:not(:focus) {
  background-color: var(--ef-pmpro-panel);
  color: var(--ef-pmpro-text);
}

/* Focus (tu estilo original, integrado) */
.pmpro_form input:focus,
.pmpro_form select:focus,
.pmpro_form textarea:focus,
.pmpro_login_wrap input:focus {
  border: 2px solid var(--ef-accent) !important;
  background-color: var(--ef-focus-bg) !important;
  color: #111 !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(218, 43, 31, 0.4);
  transition: all 0.2s ease-in-out;
}

/* ============================================================
   6) Toggle contraseña (neutral)
   ============================================================ */
.pmpro_btn-password-toggle,
.pmpro_btn-plain {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   7) PMPro LOGIN — BOTÓN ACCEDER (ESTILO EF UNIFICADO)
   Igual que tutor-btn / botones del sitio principal
   ============================================================ */
.pmpro #pmpro_login input[type="submit"] {
  position: relative !important;
  display: block !important;
  width: 100% !important;

  padding: 12px 24px !important;
  min-height: 48px !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;

  color: #2D2926 !important;
  background-color: #f5f5f7 !important;

  border: 1px solid #2D2926 !important;
  border-radius: 8px !important;

  cursor: pointer !important;
  overflow: hidden !important;
  text-align: center !important;

  box-shadow: 0 4px 10px rgba(0,0,0,.15) !important;
  z-index: 0 !important;

  transition: color .3s ease,
              font-weight .3s ease,
              box-shadow .3s ease,
              background-color .3s ease !important;
}

/* Gradiente EF */
.pmpro #pmpro_login input[type="submit"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background: linear-gradient(to left, #da2b1f 50%, transparent 50%),
              linear-gradient(to right, #da2b1f 50%, transparent 50%) !important;
  background-size: 200% 100% !important;
  background-position: left, right !important;

  z-index: -1 !important;
  transition: background-size .3s ease !important;
}

/* Hover */
.pmpro #pmpro_login input[type="submit"]:hover::before {
  background-size: 100% 100% !important;
}

.pmpro #pmpro_login input[type="submit"]:hover {
  color: #f5f5f7 !important;
  background-color: #da2b1f !important;
  box-shadow: 0 6px 14px rgba(218,43,31,.4) !important;
  border: 1px solid #2D2926 !important;
}

/* Focus accesible */
.pmpro #pmpro_login input[type="submit"]:focus-visible {
  outline: 2px solid #da2b1f !important;
  outline-offset: 2px !important;
}

/* ============================================================
   8) PMPro LOGIN — NORMALIZACIÓN TIPOGRÁFICA (EF)
   ============================================================ */

/* Labels */
.pmpro #pmpro_login label {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Inputs (texto introducido) */
.pmpro #pmpro_login input[type="text"],
.pmpro #pmpro_login input[type="email"],
.pmpro #pmpro_login input[type="password"] {
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Placeholder */
.pmpro #pmpro_login input::placeholder {
  font-size: 15px !important;
  opacity: 0.7;
}

/* Checkbox + textos auxiliares */
.pmpro #pmpro_login .login-remember,
.pmpro #pmpro_login .pmpro_form_field-password-toggle,
.pmpro #pmpro_login .pmpro_card_actions a {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Botón (refuerzo de coherencia, sin cambiar estilo) */
.pmpro #pmpro_login input[type="submit"] {
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* ============================================================
   EF — PMPro GLOBAL SURFACE
   Aplica fondo gris claro a TODOS los shortcodes PMPro
   (login, cuenta, niveles, pedidos, checkout, etc.)
   ============================================================ */

/* Wrapper principal PMPro */
.pmpro {
  background-color: #f5f5f7;
}

/* Contenedores típicos de shortcodes PMPro */
.pmpro .pmpro_card,
.pmpro_account,
.pmpro_member_profile,
.pmpro_membership,
.pmpro_orders,
.pmpro_levels,
.pmpro_checkout,
.pmpro_confirmation {
  background-color: #f5f5f7 !important;
}