/* ═══════════════════════════════════════════════════════════
   APEX Flow iOS «Versión B» (B6b) — /crear-cuenta/ y /comprar-pro/ · 2026-10-06
   Se encola SOLO en esas dos rutas (apex-app-compras.php). Usa los tokens globales.
   Pensado para teléfono: una columna, objetivos táctiles de 48 px, zonas seguras de iOS.
   ═══════════════════════════════════════════════════════════ */

body.apex-app-compras{
  background:var(--bg);color:var(--text);min-height:100vh;
  padding:max(20px,env(safe-area-inset-top,0px)) 20px max(28px,env(safe-area-inset-bottom,0px));
  overflow-x:hidden;
}

.apex-appc{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:14px}

/* Marca */
.apex-appc-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 6px}
.apex-appc-logo-apex{font-family:var(--font-display);font-weight:900;font-size:26px;line-height:1;color:var(--text);letter-spacing:.01em}
.apex-appc-logo-apex i{color:var(--accent);font-style:normal}
.apex-appc-logo-sub{font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--gray);text-transform:uppercase;padding-left:8px;border-left:2px solid var(--accent);line-height:1.2}

.apex-appc-h1{font-family:var(--font-display);font-size:clamp(28px,8vw,34px);font-weight:900;line-height:1.08;text-transform:uppercase;letter-spacing:-.01em;text-align:center;margin:4px 0 0}
.apex-appc-lead{font-size:16px;line-height:1.55;color:var(--text);text-align:center;margin:0 0 6px}

/* Aviso de error */
.apex-appc-error{background:var(--red-bg);border:1px solid var(--red);color:var(--text);border-radius:var(--radius-md);padding:12px 14px;font-size:14px;line-height:1.5}

/* Botones */
.apex-appc-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:12px 20px;border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.apex-appc-btn--primario{background:var(--accent);color:var(--accent-t);border-color:var(--accent)}
.apex-appc-btn--secundario{background:var(--bg3);color:var(--text);border-color:var(--gray2);font-size:14px;min-height:46px}
.apex-appc-btn:disabled{opacity:.45;cursor:default}
.apex-appc-btn:focus-visible,.apex-cp-plan:focus-visible,.apex-ac-ojo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.apex-appc-pie-enlace{text-align:center;font-size:15px;color:var(--text);margin:6px 0 0}
.apex-appc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.apex-appc a.apex-appc-btn{text-decoration:none}
.apex-appc a.apex-appc-btn--primario{color:var(--accent-t)}

/* ── Crear cuenta ── */
.apex-ac-form{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.apex-ac-campo label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px;letter-spacing:.02em}
.apex-ac-campo input[type=email],.apex-ac-campo input[type=password],.apex-ac-campo input[type=text]{width:100%;min-height:50px;padding:12px 14px;background:var(--bg3);border:1px solid var(--gray2);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-body);font-size:16px}
.apex-ac-campo input:focus{outline:none;border-color:var(--accent)}
.apex-ac-clave{position:relative}
.apex-ac-clave input{padding-right:92px!important}
.apex-ac-ojo{position:absolute;top:0;right:0;height:50px;padding:0 14px;background:none;border:0;color:var(--accent);font-family:var(--font-body);font-size:14px;font-weight:600}
.apex-ac-ayuda{font-size:13px;color:var(--gray);margin:6px 0 0}
.apex-ac-terminos{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text)}
.apex-ac-terminos span{cursor:pointer}
.apex-ac-terminos input{flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:var(--accent)}
/* Campo trampa: fuera de pantalla, no display:none (los bots lo siguen viendo) */
.apex-ac-trampa{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* ── Compra del Pro ── */
.apex-cp-bloque{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.apex-cp-h2{font-family:var(--font-display);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin:0}
.apex-cp-incluye{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.apex-cp-incluye li{display:flex;flex-direction:column;gap:3px;padding-left:12px;border-left:2px solid var(--accent)}
.apex-cp-incluye strong{font-size:15px;color:var(--text)}
.apex-cp-incluye span{font-size:14px;line-height:1.5;color:var(--text)}

.apex-cp-planes{display:flex;flex-direction:column;gap:10px}
.apex-cp-cargando{font-size:14px;color:var(--text);text-align:center;margin:6px 0}
.apex-cp-plan{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;padding:14px 16px;background:var(--bg3);color:var(--text);border:1px solid var(--gray2);border-radius:var(--radius-md);font-family:var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.apex-cp-plan.is-elegido{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 1px var(--accent)}
.apex-cp-plan-nombre{font-family:var(--font-display);font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--text)}
.apex-cp-plan.is-elegido .apex-cp-plan-nombre{color:var(--accent)}
.apex-cp-plan-precio{font-size:22px;font-weight:700;line-height:1.2}
.apex-cp-plan-renueva{font-size:13px;color:var(--gray)}
.apex-cp-plan-intro{font-size:13px;font-weight:600;color:var(--accent);margin-top:2px}
.apex-cp-resumen{font-size:14px;line-height:1.55;color:var(--text);margin:0}
.apex-cp-renovacion{font-size:13px;line-height:1.55;color:var(--gray);margin:0}
.apex-cp-secundarios{display:flex;flex-direction:column;gap:8px}
.apex-cp-nota{font-size:14px;color:var(--text);text-align:center;margin:0}

.apex-cp-ya{display:flex;flex-direction:column;gap:12px;background:var(--bg2);border:1px solid var(--accent-bd);border-radius:var(--radius-lg);padding:20px 16px}
.apex-cp-ya-txt{font-size:17px;line-height:1.45;text-align:center;margin:0;color:var(--text)}

.apex-cp-estado{min-height:20px;font-size:14px;line-height:1.5;text-align:center;color:var(--text);margin:0}
.apex-cp-estado.is-ok{color:var(--accent)}
.apex-cp-estado.is-error{color:var(--text);border-left:3px solid var(--red);padding-left:10px;text-align:left}
.apex-cp-exito{display:flex;flex-direction:column;gap:12px;background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:var(--radius-lg);padding:20px 16px}
.apex-cp-exito[hidden],.apex-cp-nota[hidden],.apex-cp-resumen[hidden],.apex-cp-bloque[hidden]{display:none}
.apex-cp-exito-txt{font-size:18px;font-weight:700;text-align:center;margin:0}

.apex-cp-legal{text-align:center;font-size:14px;color:var(--text);margin:4px 0 0}

/* ── Selector de idioma (fix7, 2026-10-06): lo PRIMERO de la pantalla, antes de la explicación. Tres botones grandes (≥48 px),
   el idioma actual relleno con el acento. Cada otro idioma es un formulario POST del mecanismo oficial (apex-idioma.php): fija la
   cookie y vuelve a ESTA misma pantalla en /en/… o /pt/…; nada redirige mientras la página carga. */
.apex-appc-idioma{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
.apex-appc-idioma-rotulo{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);text-align:center;margin:0}
.apex-appc-idioma-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.apex-appc-idioma-fila form{margin:0;display:block}
.apex-appc-idioma-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:8px 6px;border-radius:var(--radius-md);border:1px solid var(--gray2);background:var(--bg3);color:var(--text);font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:.02em;line-height:1.1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.apex-appc-idioma-btn.is-actual{background:var(--accent);border-color:var(--accent);color:var(--accent-t);cursor:default}
.apex-appc-idioma-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.apex-cuenta-restaurar{margin-top:12px}

/* ── Anular el hover/focus/active del tema padre (fix7, 2026-10-06) ──
   Kadence (`button:hover,button:focus,button:active{color:var(--global-palette-btn-hover);background:…;box-shadow:…}`, especificidad 0,1,1) pisaba
   el color de TODOS los botones de estas pantallas: en el iPhone el :hover se queda pegado tras el toque y «Restaurar compras» quedaba con texto
   #112c38 sobre #0a1e26 (1,17:1, ilegible). Cada estado se declara acá con especificidad mayor (0,2,0) y con los tokens del tema. */
.apex-appc-btn--primario:hover,.apex-appc-btn--primario:focus,.apex-appc-btn--primario:active{background:var(--accent);color:var(--accent-t);border-color:var(--accent);box-shadow:none}
.apex-appc-btn--secundario:hover,.apex-appc-btn--secundario:focus,.apex-appc-btn--secundario:active{background:var(--bg4);color:var(--text);border-color:var(--text);box-shadow:none}
.apex-appc-idioma-btn:hover,.apex-appc-idioma-btn:focus,.apex-appc-idioma-btn:active{background:var(--bg4);color:var(--text);border-color:var(--text);box-shadow:none}
.apex-appc-idioma-btn.is-actual,.apex-appc-idioma-btn.is-actual:hover{background:var(--accent);color:var(--accent-t);border-color:var(--accent)}
.apex-cp-plan:hover,.apex-cp-plan:focus,.apex-cp-plan:active{background:var(--bg4);color:var(--text);border-color:var(--text);box-shadow:none}
.apex-cp-plan.is-elegido:hover,.apex-cp-plan.is-elegido:focus,.apex-cp-plan.is-elegido:active{background:var(--accent-bg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.apex-ac-ojo:hover,.apex-ac-ojo:focus,.apex-ac-ojo:active{background:none;color:var(--accent);box-shadow:none}
.apex-cuenta-restaurar .flow-btn:hover,.apex-cuenta-restaurar .flow-btn:focus,.apex-cuenta-restaurar .flow-btn:active{box-shadow:none}

/* ── Formularios: el reset global de style.css (`label{mono 10px mayúsculas gris !important}`, `input{14px, borde casi invisible !important}`)
   dejaba «Correo electrónico» y «Contraseña» en 10 px y el campo con borde 1,45:1. Se pisa SOLO acá, con !important y especificidad mayor,
   y con los tokens del tema (borde --gray2 = 5,4:1 sobre el fondo; 16 px evita el zoom de iOS al enfocar). ── */
body.apex-app-compras .apex-ac-campo label{font-family:var(--font-body)!important;font-size:14px!important;font-weight:600!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--text)!important}
body.apex-app-compras .apex-ac-campo input{background:var(--bg3)!important;border:1px solid var(--gray2)!important;border-radius:var(--radius-md)!important;font-size:16px!important;padding:12px 14px!important;color:var(--text)!important}
body.apex-app-compras .apex-ac-campo input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-glow)!important}
body.apex-app-compras .apex-ac-campo input::placeholder{color:var(--gray)!important}
body.apex-app-compras .apex-ac-clave input{padding-right:92px!important}