/* =====================================================================
   eServices · El ingreso (login.php, pin.php, sin_equipo.php), oct 2026

   Copia del formato de ingreso del ecosistema (Inscripciones,
   css/acceso-ecosistema.css, que a su vez calca el de Ekklesia): el campo
   azul es de la iglesia y la hoja blanca es el sistema; arriba, la franja
   «E1». Cambios propios: sin el calendario de eventos (en su lugar, tres
   beneficios y el enlace a la app), la fila de plataformas del teléfono
   con tantas columnas como plataformas, y la ventana de la app.
   pin.php (G2.7) es el login_2fa.php de Ekklesia: el hero de tarjeta, la
   hoja con el chip «ϵkklesia», el escudo y el campo único (el bloque «2FA»,
   al final, es el mismo de assets/srv.css).
   ===================================================================== */
*, *::before, *::after{ box-sizing:border-box; }

/* Tokens: los MISMOS nombres y valores de assets/srv.css (que el ingreso no
   carga), solo los que esta hoja usa. Fuera de :root no se escribe ningún
   color: el tema oscuro (A3.7) redefine este bloque y el de srv.css.
   tools/verificar_ui.php comprueba que los valores coincidan. Amanecer
   (spec 2026-10-25 §1) cambió --sf2 y --r: aquí valen lo mismo que en srv.css.
   --renacer es el azul institucional literal de Ekklesia (#003399): solo lo
   usa la aurora del campo azul.
   El tema oscuro (spec §1.8) es el MISMO de srv.css, con estos tokens: forzado
   (data-tema="oscuro", que el servidor saca de la cookie srv_tema) y en
   Automático; el papel, siempre claro. El campo azul ya es oscuro: cambia la
   hoja. El verificador compara los valores con los del oscuro de srv.css. */
:root{
  color-scheme:light;
  --nav:#071129; --nav-on:#fff; --nav-ink:rgba(255,255,255,.64);
  --acc:#0e2a63; --acc-ink:#fff; --acc-sf:#eef1f8; --acc-bd:#c6cee0; --acc-nav:#7fa6ff; --acc-hov:#173a80;
  --renacer:#003399;
  --ink:#14161b; --ink2:#3d424d; --mut:#656b77;
  --ln:#e4e7ec; --ln2:#edeff3; --sf:#fff; --sf2:#f6f8fc;
  --ok:#067a55; --ok-sf:#e9f7f1; --ok-bd:#b7e2d1;
  --warn:#b45309; --warn-sf:#fdf5e7; --warn-bd:#f0d9a8;
  --danger:#c11b45; --dan-sf:#fff1f3; --dan-bd:#fecdd3;
}
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --nav:#060b16; --nav-on:#fff; --nav-ink:rgba(255,255,255,.64);
  --acc:#8fb0ff; --acc-ink:#08132e; --acc-sf:#16244a; --acc-bd:#2d4277; --acc-nav:#7fa6ff; --acc-hov:#a5c0ff;
  --renacer:#003399;
  --ink:#e9edf5; --ink2:#c3c9d6; --mut:#8e97ab;
  --ln:#243049; --ln2:#1c263a; --sf:#121a2b; --sf2:#0f1626;
  --ok:#34d399; --ok-sf:#0d2a20; --ok-bd:#195d44;
  --warn:#fbbf24; --warn-sf:#2a200b; --warn-bd:#695012;
  --danger:#fb7185; --dan-sf:#2e1119; --dan-bd:#6b2e39;
}
@media (prefers-color-scheme: dark){
  :root[data-tema="auto"]{
    color-scheme:dark;
    --nav:#060b16; --nav-on:#fff; --nav-ink:rgba(255,255,255,.64);
    --acc:#8fb0ff; --acc-ink:#08132e; --acc-sf:#16244a; --acc-bd:#2d4277; --acc-nav:#7fa6ff; --acc-hov:#a5c0ff;
    --renacer:#003399;
    --ink:#e9edf5; --ink2:#c3c9d6; --mut:#8e97ab;
    --ln:#243049; --ln2:#1c263a; --sf:#121a2b; --sf2:#0f1626;
    --ok:#34d399; --ok-sf:#0d2a20; --ok-bd:#195d44;
    --warn:#fbbf24; --warn-sf:#2a200b; --warn-bd:#695012;
    --danger:#fb7185; --dan-sf:#2e1119; --dan-bd:#6b2e39;
  }
}
@media print{
  :root[data-tema]{
    color-scheme:light;
    --nav:#071129; --nav-on:#fff; --nav-ink:rgba(255,255,255,.64);
    --acc:#0e2a63; --acc-ink:#fff; --acc-sf:#eef1f8; --acc-bd:#c6cee0; --acc-nav:#7fa6ff; --acc-hov:#173a80;
    --renacer:#003399;
    --ink:#14161b; --ink2:#3d424d; --mut:#656b77;
    --ln:#e4e7ec; --ln2:#edeff3; --sf:#fff; --sf2:#f6f8fc;
    --ok:#067a55; --ok-sf:#e9f7f1; --ok-bd:#b7e2d1;
    --warn:#b45309; --warn-sf:#fdf5e7; --warn-bd:#f0d9a8;
    --danger:#c11b45; --dan-sf:#fff1f3; --dan-bd:#fecdd3;
  }
}
:root{
  --sans:'Schibsted Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:12px; --ease:cubic-bezier(.22,1,.36,1); --t-fast:120ms;
}

/* >>> CARGA · el velo con la píldora (G2.8; lo maneja assets/carga.js: SrvCarga.abrir y .cerrar)
   El loader de Ekklesia (includes/loader.php: #ek-ld-ov y #ek-ld-pill) con los tokens de la casa. Es el MISMO bloque en
   assets/srv.css y en assets/acceso.css (el ingreso no carga srv.css): solo usa tokens que están en las dos hojas
   (--nav, --nav-on, --acc-nav, --r, --sans) y ningún color escrito a mano. La píldora es chrome oscuro (--nav) en
   los dos temas; el anillo, --acc-nav (el azul calibrado contra ese fondo). El velo asoma con .srv-ver y se va con .srv-sale
   (que ya no ataja clics); [hidden] lo saca del flujo. El de llegada (.srv-ya) entra sin desvanecerse: viene de la página anterior. Todo movimiento —el desvanecido, el desenfoque y los anillos— vive en
   prefers-reduced-motion:no-preference: con «reducir» el velo solo aparece y desaparece. */
.srv-cargando{ position:fixed; inset:0; z-index:var(--z-load, 400); display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--nav) 28%, transparent); }
.srv-cargando[hidden]{ display:none; }
.srv-cargando.srv-sale{ opacity:0; pointer-events:none; }
.srv-cargando-pill{ display:flex; align-items:center; gap:14px; padding:15px 26px; border-radius:var(--r); background:var(--nav); white-space:nowrap;
  box-shadow:0 12px 34px -10px color-mix(in srgb, var(--nav) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--nav-on) 10%, transparent); }
.srv-cargando-aro{ position:relative; flex:none; width:34px; height:34px; }
.srv-cargando-aro > i{ position:absolute; border-radius:50%; }
.srv-cargando-r0{ inset:0; border:3px solid color-mix(in srgb, var(--nav-on) 22%, transparent); }
.srv-cargando-r1{ inset:0; border:3px solid transparent; border-top-color:var(--acc-nav); }
/* El contra-anillo, tenue: el emblema del centro es un disco blanco y dos blancos a 7 px se leen como una sola mancha. */
.srv-cargando-r2{ inset:7px; border:2px solid transparent; border-bottom-color:color-mix(in srgb, var(--nav-on) 32%, transparent); }
.srv-cargando-em{ position:absolute; z-index:2; top:50%; left:50%; width:12px; height:auto; transform:translate(-50%, -50%); }
.srv-cargando-tx{ display:flex; flex-direction:column; gap:2px; line-height:1.15; }
.srv-cargando-t1{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--nav-on); }
.srv-cargando-t2{ font-family:var(--sans); font-size:12px; color:color-mix(in srgb, var(--nav-on) 60%, transparent); }
@media (prefers-reduced-motion:no-preference){
  .srv-cargando{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:opacity .14s ease; }
  .srv-cargando.srv-ver{ animation:srvCargaEntra .16s ease both; }
  .srv-cargando.srv-ver.srv-ya{ animation:none; }   /* el de llegada ya estaba a la vista en la página anterior: sin cortes */
  .srv-cargando-r1{ animation:srvCargaGiro .9s linear infinite; }
  .srv-cargando-r2{ animation:srvCargaGiro 1.4s linear infinite reverse; }
  @keyframes srvCargaEntra{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes srvCargaGiro{ to{ transform:rotate(360deg); } }
}
/* <<< CARGA */

html{ background:var(--nav); overflow-x:hidden; -webkit-text-size-adjust:100%; }
body.ek-acceso{
  min-height:100vh; margin:0; padding:74px 26px 26px;
  display:grid; place-items:center; align-content:center;
  /* overflow:hidden en los DOS ejes, como Ekklesia. Con sólo overflow-x
     el navegador vuelve auto el eje vertical: el body pasaba a tener su
     propio scroll y el emblema que se sale por abajo (::before) dejaba
     ~270px de azul vacío para bajar, en un ingreso que cabe en la ventana
     (8-oct-2026). Lo que no cabe en el teléfono lo sigue bajando la
     página: el body crece con su contenido (min-height). */
  position:relative; overflow:hidden; color:var(--nav-on);
  font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle 640px at 22% 20%, color-mix(in srgb, var(--acc-nav) 20%, transparent), transparent 70%),
    radial-gradient(circle 560px at 86% 84%, color-mix(in srgb, var(--acc-nav) 13%, transparent), transparent 70%),
    radial-gradient(circle 760px at 56% 46%, color-mix(in srgb, var(--renacer) 24%, transparent), transparent 70%),
    var(--nav);
}
/* El emblema de la iglesia, enorme y casi apagado, saliéndose por el borde. */
body.ek-acceso::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-190px; bottom:-230px; width:660px; height:660px;
  background:url("img/logo-renacer-emblema-blanco.png") center/contain no-repeat;
  opacity:.05; transform:rotate(-7deg);
}
.ek-acceso img{ max-width:100%; }
.ek-acceso a{ color:inherit; }

/* -- La tarjeta -- */
.ek-acceso .au-card{
  position:relative; z-index:1; width:min(1000px,100%);
  display:grid; grid-template-columns:1fr .82fr; gap:56px; align-items:center;
}
.ek-acceso .au-hero-in{ display:flex; flex-direction:column; }
.ek-acceso .au-wm{ margin:0; line-height:0; }
.ek-acceso .au-wm img{ width:330px; height:auto; display:block; }
.ek-acceso .au-rule{ width:44px; height:2px; margin:24px 0 0; background:color-mix(in srgb, var(--nav-on) 22%, transparent); border:0; }
.ek-acceso .au-vers{ margin:24px 0 0; max-width:25em; }
.ek-acceso .au-vers p{ margin:0; font-size:19px; line-height:1.45; font-weight:500; letter-spacing:-.015em; color:var(--nav-on); text-wrap:balance; }
.ek-acceso .au-vers cite{
  display:block; margin-top:12px; font-style:normal; font-family:var(--sans);
  font-size:12.5px; font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums; color:var(--acc-nav);
}


/* -- La hoja blanca -- */
.ek-acceso .au-hoja{
  position:relative; background:var(--sf); color:var(--ink); border-radius:14px;
  padding:36px 34px 24px; display:flex; flex-direction:column;
  box-shadow:0 24px 60px -18px color-mix(in srgb, var(--nav) 55%, transparent);
}
.ek-acceso .au-app{ display:flex; align-items:center; gap:10px; padding-bottom:17px; margin-bottom:20px; border-bottom:1px solid var(--ln); }
.ek-acceso .au-app-ico{ width:26px; height:26px; border-radius:7px; background:var(--acc); color:var(--acc-ink); display:grid; place-items:center; flex:none; }
.ek-acceso .au-app-tx{
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--acc); white-space:nowrap;   /* la marca es un logotipo: sigue en mayúsculas espaciadas */
}
.ek-acceso .au-fh{ font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.3; }
.ek-acceso .au-fs{ font-size:13.5px; color:var(--mut); margin-top:6px; line-height:1.5; }
.ek-acceso .au-form{ display:flex; flex-direction:column; margin:0; }
.ek-acceso .au-lbl{ font-size:12.5px; font-weight:600; color:var(--ink2); margin:18px 0 7px; display:block; line-height:1.3; }
.ek-acceso .au-inpwrap{ position:relative; display:flex; align-items:center; }
.ek-acceso .au-inpwrap > svg{ position:absolute; left:13px; color:var(--mut); pointer-events:none; }
.ek-acceso .au-inp{
  width:100%; min-height:46px; padding:12px 14px 12px 37px; border:1px solid var(--ln);
  border-radius:var(--r); font:inherit; font-size:14.5px; background:var(--sf2); color:var(--ink);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ek-acceso .au-inp::placeholder{ color:var(--mut); }
.ek-acceso .au-inp:focus{ outline:none; border-color:var(--acc); background:var(--sf); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 13%, transparent); }
.ek-acceso .au-btn{
  margin-top:22px; width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; background:var(--acc); color:var(--acc-ink); font:inherit; font-size:14.5px; font-weight:600;
  min-height:48px; padding:13px; border-radius:var(--r); cursor:pointer;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ek-acceso .au-btn:hover{ background:var(--acc-hov); }
.ek-acceso .au-btn:active{ transform:translateY(1px); }
.ek-acceso .au-btn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
/* El secundario (con borde, nunca lleno): la salida a la app de pulso.php bajo su formulario, o «Cambiar mi respuesta» bajo la salida (G1.7). */
.ek-acceso .au-btn.au-btn-sec{ background:transparent; color:var(--acc); box-shadow:inset 0 0 0 1px var(--ln); }
.ek-acceso .au-btn.au-btn-sec:hover{ background:var(--acc-sf); box-shadow:inset 0 0 0 1px var(--acc-bd); }
.ek-acceso .au-btn + .au-btn-sec, .ek-acceso .au-form + .au-btn-sec{ margin-top:10px; }
.ek-acceso .au-aviso{
  display:flex; gap:9px; align-items:flex-start; margin-top:18px; padding:11px 13px;
  border-radius:var(--r); font-size:13px; line-height:1.45;
  background:var(--acc-sf); color:var(--acc); border:1px solid var(--acc-bd);
}
.ek-acceso .au-aviso svg{ flex:none; margin-top:1px; }
.ek-acceso .au-aviso.error{ background:var(--dan-sf); color:var(--danger); border-color:var(--dan-bd); }
.ek-acceso .au-aviso.success{ background:var(--ok-sf); color:var(--ok); border-color:var(--ok-bd); }
.ek-acceso .au-aviso.warning{ background:var(--warn-sf); color:var(--warn); border-color:var(--warn-bd); }
.ek-acceso .au-foot{ margin-top:22px; padding-top:14px; border-top:1px solid var(--ln); }
.ek-acceso .au-firma{
  margin-top:12px; padding-top:11px; border-top:1px solid var(--ln2);
  display:flex; justify-content:center; color:var(--mut);
}
/* «parte de ϵKKLESIA» (_marca_ekklesia.php): el logotipo de Ekklesia en mayúsculas espaciadas y en --sans, como el resto del ingreso
   (esta página no carga css/renacer.css). */
.ek-acceso .ek-marca{ --ek-e:currentColor; display:inline-flex; align-items:center;
  font:600 11px/1 var(--sans);
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; color:var(--acc); }   /* «parte de ϵKKLESIA»: logotipo, no rótulo */
.ek-acceso .ek-marca svg{ flex:none; width:1.85em; height:1.85em; margin-right:-.3em; stroke:var(--ek-e); }
.ek-acceso .ek-firma{ display:inline-flex; align-items:center; gap:7px; font-size:11px; }

/* ---------------------------------------------------------------------
   Franja del ecosistema (E1): la misma de Ekklesia y de Gestión Académica.
   ------------------------------------------------------------------- */
.ek-acceso .au-eco{
  position:absolute; z-index:2; top:0; left:0; right:0; height:48px; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid color-mix(in srgb, var(--nav-on) 7%, transparent);
}
.ek-acceso .au-eco-grupo{ display:flex; align-items:center; gap:20px; min-width:0; }
.ek-acceso .au-eco-rot{
  display:flex; align-items:center; gap:20px; white-space:nowrap;
  font-family:var(--sans);
  font-size:11.5px; font-weight:600; letter-spacing:0; color:color-mix(in srgb, var(--acc-nav) 85%, transparent);
}
.ek-acceso .au-eco-rot::after{ content:""; width:1px; height:14px; background:color-mix(in srgb, var(--nav-on) 14%, transparent); }
.ek-acceso .au-eco-a, .ek-acceso .au-eco-aqui{
  display:inline-flex; align-items:center; gap:7px; padding:12px 0;
  font-size:12.5px; font-weight:500; white-space:nowrap; text-decoration:none; line-height:1.2;
}
.ek-acceso .au-eco-a{ color:var(--nav-ink); transition:color var(--t-fast) var(--ease); }
.ek-acceso .au-eco-a svg{ flex:none; }
.ek-acceso .au-eco-fl{ opacity:.5; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ek-acceso .au-eco-a:hover{ color:var(--nav-on); }
.ek-acceso .au-eco-a:hover .au-eco-fl{ opacity:1; transform:translate(1px,-1px); }
.ek-acceso .au-eco-a:focus-visible{ outline:2px solid var(--acc-nav); outline-offset:3px; border-radius:4px; color:var(--nav-on); }
.ek-acceso .au-eco-aqui{ color:var(--nav-on); font-weight:600; gap:8px; }
.ek-acceso .au-eco-aqui i{ width:6px; height:6px; border-radius:50%; background:var(--acc-nav); }
.ek-acceso .au-eco-pie{ display:none; }

@media (max-width:1200px){
  .ek-acceso .au-eco .au-eco-rot{ display:none; }
}
@media (max-width:980px){
  .ek-acceso .au-eco{ justify-content:flex-end; }
  .ek-acceso .au-eco-webs{ display:none; }
  .ek-acceso .au-eco-pie{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:30px; }
  .ek-acceso .au-eco-pie .au-eco-rot::after{ display:none; }
  .ek-acceso .au-eco-pie-fila{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 26px; }
  .ek-acceso .au-eco-pie .au-eco-a{ min-height:44px; padding:0; font-size:13px; }
}
/* Teléfono: sin calendario; manda el formulario. El hero es compacto (G2: la franja y el hero ocupaban ~285 px antes del formulario):
   la marca más chica, sin la raya, el versículo en dos líneas y menos aire; la hoja sube. */
@media (max-width:860px){
  body.ek-acceso{ padding:76px 18px 32px; place-items:start center; align-content:start; }
  body.ek-acceso::before{ left:-140px; bottom:-190px; width:460px; height:460px; opacity:.045; }
  .ek-acceso .au-card{ grid-template-columns:1fr; gap:18px; max-width:440px; }
  .ek-acceso .au-wm img{ width:150px; }
  .ek-acceso .au-rule{ display:none; }
  .ek-acceso .au-vers{ margin-top:10px; }
  .ek-acceso .au-vers p{ font-size:14.5px; line-height:1.4; }
  .ek-acceso .au-vers cite{ margin-top:6px; font-size:10.5px; }
  .ek-acceso .au-hoja{ padding:28px 22px 20px; }
  .ek-acceso .au-app{ padding-bottom:14px; margin-bottom:17px; }
  .ek-acceso .au-app-tx{ font-size:12.5px; }
  .ek-acceso .au-eco{ height:auto; padding:0; display:block; background:color-mix(in srgb, var(--nav-on) 2.5%, transparent); }
  .ek-acceso .au-eco-plat{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:0; }
  .ek-acceso .au-eco-plat .au-eco-rot, .ek-acceso .au-eco-aqui, .ek-acceso .au-eco-plat .au-eco-fl{ display:none; }
  .ek-acceso .au-eco-plat .au-eco-a{
    flex-direction:column; justify-content:center; gap:5px; min-height:58px; padding:9px 4px;
    font-size:11px; white-space:normal; text-align:center;
  }
  .ek-acceso .au-eco-plat .au-eco-a + .au-eco-a{ border-left:1px solid color-mix(in srgb, var(--nav-on) 6%, transparent); }
  .ek-acceso .au-eco-plat .au-eco-a svg{ width:17px; height:17px; }
}

@keyframes ekAccIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ek-acceso .au-hero-in > *{ animation:ekAccIn .40s var(--ease) both; }
.ek-acceso .au-hero-in > *:nth-child(2){ animation-delay:.07s; }
.ek-acceso .au-hero-in > *:nth-child(3){ animation-delay:.12s; }
.ek-acceso .au-hero-in > *:nth-child(n+4){ animation-delay:.17s; }
.ek-acceso .au-hoja{ animation:ekAccIn .40s var(--ease) .22s both; }
.ek-acceso .au-eco{ animation:ekAccIn .40s var(--ease) .30s both; }
@media (prefers-reduced-motion:reduce){
  .ek-acceso .au-hero-in > *, .ek-acceso .au-hoja, .ek-acceso .au-eco{ animation:none; opacity:1; transform:none; }
  .ek-acceso .au-inp, .ek-acceso .au-btn, .ek-acceso .au-eco-a, .ek-acceso .au-eco-fl{ transition:none; }
}

/* El reemplazo del «No puedo» de r.php (tarea C5): «¿Hablaste con alguien que te reemplace?», una opción por fila (toda la fila es el
   objetivo, ≥ 44 px) y la casilla «Ya lo hablé con …». Solo tokens. */
.ek-acceso .au-reemplazo{ border:0; margin:0; padding:0; min-width:0; }
.ek-acceso .au-reemplazo legend{ padding:0; }
.ek-acceso .au-op{ display:flex; align-items:flex-start; gap:11px; min-height:48px; margin-top:8px; padding:11px 13px; border:1px solid var(--ln);
  border-radius:var(--r); background:var(--sf2); color:var(--ink); font-size:14px; line-height:1.35; cursor:pointer; }
.ek-acceso .au-op:has(input:checked){ border-color:var(--acc); background:var(--acc-sf); }
.ek-acceso .au-op:has(input:focus-visible){ outline:2px solid var(--acc); outline-offset:2px; }
.ek-acceso .au-op input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--acc); }
.ek-acceso .au-op b{ display:block; font-weight:600; }
.ek-acceso .au-op small{ display:block; margin-top:2px; font-size:12.5px; color:var(--mut); }

/* La fila «Contraseña · ¿Olvidaste tu contraseña?» (de recuperar-clave.css de Inscripciones). */
.ek-acceso .au-lbl-fila{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:18px 0 7px; }
.ek-acceso .au-lbl-fila .au-lbl{ margin:0; }
.ek-acceso .au-olvido{ font-size:12.5px; font-weight:600; color:var(--acc); text-decoration:none; white-space:nowrap; border-radius:3px; }
.ek-acceso .au-olvido:hover{ text-decoration:underline; text-underline-offset:2px; }
.ek-acceso .au-olvido:focus-visible{ outline:2px solid var(--acc-nav); outline-offset:2px; }


/* ---------------------------------------------------------------------
   eServices: beneficios, enlace a la app, recordar, PIN y la ventana.
   ------------------------------------------------------------------- */
.ek-acceso .au-benef{ margin-top:30px; padding-top:16px; border-top:1px solid color-mix(in srgb, var(--nav-on) 10%, transparent); max-width:440px; display:flex; flex-direction:column; gap:12px; }
.ek-acceso .au-benef-rot{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0; color:color-mix(in srgb, var(--acc-nav) 85%, transparent); }
.ek-acceso .au-benef-it{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.45; color:color-mix(in srgb, var(--nav-on) 88%, transparent); }
.ek-acceso .au-benef-it svg{ flex:none; margin-top:1px; color:var(--acc-nav); }
.ek-acceso .au-applink{ align-self:flex-start; margin-top:6px; min-height:40px; padding:0; border:0; background:none; display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:13.5px; font-weight:500; color:color-mix(in srgb, var(--acc-nav) 60%, var(--nav-on)); cursor:pointer; }
.ek-acceso .au-applink span{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); }
.ek-acceso .au-applink:hover span{ text-decoration-color:currentColor; }
.ek-acceso .au-applink:focus-visible{ outline:2px solid var(--acc-nav); outline-offset:3px; border-radius:4px; }
.ek-acceso .au-applink-movil{ display:none; }

.ek-acceso .au-recordar{ display:flex; align-items:center; gap:10px; margin-top:16px; min-height:32px; font-size:13.5px; color:var(--ink2); cursor:pointer; }
.ek-acceso .au-recordar input{ width:18px; height:18px; accent-color:var(--acc); }
.ek-acceso .au-foot-texto{ margin:0; font-size:12.5px; line-height:1.5; color:var(--mut); }


.ek-acceso .au-dlg{ width:min(560px, calc(100% - 32px)); border:0; border-radius:16px; padding:0; background:var(--sf); color:var(--ink); box-shadow:0 30px 80px -20px color-mix(in srgb, var(--nav) 60%, transparent); }
.ek-acceso .au-dlg::backdrop{ background:color-mix(in srgb, var(--nav) 62%, transparent); }
.ek-acceso .au-dlg[open]{ animation:auDlgIn .28s var(--ease); }
.ek-acceso .au-dlg[open]::backdrop{ animation:auFundido .28s var(--ease); }
.ek-acceso .au-dlg-in{ padding:26px 28px 24px; display:flex; flex-direction:column; gap:16px; }
.ek-acceso .au-dlg-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ek-acceso .au-dlg h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em; }
.ek-acceso .au-dlg p{ margin:0; font-size:14px; line-height:1.5; color:var(--ink2); }
.ek-acceso .au-dlg-cerrar{ flex:none; width:40px; height:40px; margin:-6px -10px 0 0; border:0; background:none; border-radius:10px; display:grid; place-items:center; cursor:pointer; color:var(--ink2); }
.ek-acceso .au-tiendas{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.ek-acceso .au-tienda{ border:1px solid var(--ln); border-radius:14px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.ek-acceso .au-tienda b{ font-size:15px; }
.ek-acceso .au-tienda span{ font-size:12.5px; color:var(--mut); }
/* La tienda publicada es un enlace (cambia al pasar); la que aún no está, «Pronto», va apagada: borde punteado, sin fondo de acción ni
   cursor de enlace, y sin cambio al pasar (aria-disabled en login.php). */
.ek-acceso a.au-tienda{ color:var(--ink); text-decoration:none; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.ek-acceso a.au-tienda:hover{ border-color:var(--acc-bd); background:var(--acc-sf); }
.ek-acceso a.au-tienda:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.ek-acceso .au-tienda[aria-disabled="true"]{ border-style:dashed; background:var(--sf2); color:var(--mut); cursor:default; padding:12px 14px; gap:4px; }
.ek-acceso .au-tienda[aria-disabled="true"] b{ font-size:14px; font-weight:600; color:var(--ink2); }
.ek-acceso .au-qr{ flex:none; width:150px; height:150px; border-radius:10px; background:#fff; border:1px solid var(--ln); overflow:hidden; display:grid; place-items:center; } /* dato: el QR va siempre sobre blanco (spec §1.8), en los dos temas */
.ek-acceso .au-qr svg{ width:100%; height:100%; display:block; }
.ek-acceso .au-qr-fila{ display:flex; align-items:center; gap:20px; }
.ek-acceso .au-qr-movil{ display:none; }
/* /instalar.php: los pasos por sistema. */
.ek-acceso .au-inst{ border:1px solid var(--ln); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.ek-acceso .au-inst b{ font-size:15px; }
.ek-acceso .au-inst ol{ margin:8px 0 0; padding-left:20px; font-size:14px; line-height:1.6; color:var(--ink2); }
@keyframes auDlgIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes auFundido{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width:860px){
  .ek-acceso .au-applink-movil{ display:inline-flex; align-self:center; margin-top:10px; color:var(--acc); }
  .ek-acceso .au-benef .au-applink{ display:none; }
  .ek-acceso .au-benef{ display:none; }
  .ek-acceso .au-dlg{ width:100%; max-width:none; margin:auto 0 0; border-radius:20px 20px 0 0; }
  .ek-acceso .au-dlg[open]{ animation:auHojaIn .3s var(--ease); }
  .ek-acceso .au-tiendas:not(:has(a.au-tienda)){ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }   /* las dos «Pronto»: chicas, lado a lado */
  .ek-acceso .au-tiendas:has(a.au-tienda){ grid-template-columns:1fr; }
  .ek-acceso .au-qr-fila{ display:none; }      /* en el teléfono, un QR no sirve */
  .ek-acceso .au-qr-movil{ display:flex; }
}
@keyframes auHojaIn{ from{ transform:translateY(100%); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){
  .ek-acceso .au-dlg[open], .ek-acceso .au-dlg[open]::backdrop{ animation:none; }
}

/* ---------------------------------------------------------------------
   pin.php: el segundo paso del ingreso, el login_2fa.php de Ekklesia (G2.7).
   El hero de tarjeta (.au-card, como el ingreso) y la hoja con el chip
   «ϵkklesia», el escudo y el campo único; los textos y las clases de
   Ekklesia (au-fh, au-fs, au-inpwrap, au-check, au-err, au-ok, au-link,
   micro, au-sub). Lo propio: el PIN por correo como enlace bajo el campo
   (.au-pin-a) y el desplegable de días de «Recordar» (.au-dias).
   ------------------------------------------------------------------- */
/* El aviso de pin.php está siempre (role=alert); vacío queda oculto solo a la vista, para que lo que aparezca se anuncie. */
.ek-acceso .au-aviso-vacio{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ek-acceso .au-pin-main{ min-width:0; display:flex; flex-direction:column; }
/* El chip «ϵkklesia» (ek_marca_ekklesia): la ϵ EMPIEZA la palabra, así que el texto se le pega (-4 px) y se dibuja sola. */
.ek-acceso.au-pin-pagina .au-app{ gap:0; }
.ek-acceso .au-app svg.ek-marca{ display:block; flex:none; width:26px; height:26px; margin:0; }
.ek-acceso.au-pin-pagina .au-app-tx{ font-size:14px; letter-spacing:.2em; margin-left:-4px; }
.ek-acceso .au-app .ek-marca path{ stroke-dasharray:1; stroke-dashoffset:1; animation:auMarcaDibujo .7s var(--ease) forwards; }
@keyframes auMarcaDibujo{ to{ stroke-dashoffset:0; } }
.ek-acceso .au-app-centro{ justify-content:center; border-bottom:0; margin-bottom:22px; }
.ek-acceso .au-sub{ margin:26px 0 0; font-size:13px; line-height:1.6; max-width:36ch; color:color-mix(in srgb, var(--nav-on) 45%, transparent); }
.ek-acceso .au-pin-escudo{ display:flex; justify-content:center; margin:18px 0 22px; }
/* La llave sobre el campo también mientras se sacude (la animación lo sube de capa). */
.ek-acceso .au-inpwrap > .ai{ z-index:1; }
/* El PIN por correo: un enlace bajo el campo, con el estilo de los enlaces de Ekklesia (.au-link a). */
.ek-acceso .au-pin-a{ align-self:flex-start; min-height:44px; margin:2px 0 -6px; padding:0; border:0; background:none; display:inline-flex; align-items:center;
  font:inherit; font-size:13px; font-weight:600; color:var(--acc); text-decoration:none; cursor:pointer; border-radius:3px; }
.ek-acceso .au-pin-a:hover{ text-decoration:underline; text-underline-offset:2px; }
.ek-acceso .au-pin-a:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
/* «Recordar este dispositivo»: la casilla de Ekklesia y, solo con ella marcada, el desplegable de días (srv-pin.js lo habilita). */
.ek-acceso .au-check{ display:flex; align-items:center; gap:.5rem; font-size:.875rem; margin:.75rem 0; color:var(--ink2); cursor:pointer; }
.ek-acceso .au-check input{ flex:none; width:18px; height:18px; margin:0; accent-color:var(--acc); }
.ek-acceso .au-recordar-2fa{ display:flex; align-items:center; flex-wrap:wrap; gap:0 12px; margin-top:6px; }
.ek-acceso .au-recordar-2fa .au-check{ margin:0; min-height:44px; }
.ek-acceso .au-dias{ width:auto; min-height:38px; padding:7px 10px; border:1px solid var(--ln); border-radius:var(--r);
  font:inherit; font-size:13.5px; color:var(--ink); background:var(--sf2); cursor:pointer; }
.ek-acceso .au-dias:focus{ outline:none; border-color:var(--acc); background:var(--sf); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 13%, transparent); }
.ek-acceso .au-recordar-2fa:not(:has(input:checked)) .au-dias, .ek-acceso .au-dias:disabled{ display:none; }
/* Los avisos de Ekklesia: .au-err (el código incorrecto) y .au-ok (salió el código); .au-espera, el minuto entre dos correos. */
.ek-acceso .au-err, .ek-acceso .au-ok{ display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:var(--r);
  font-size:13px; margin-top:18px; line-height:1.45; }
.ek-acceso .au-err svg, .ek-acceso .au-ok svg{ flex:none; margin-top:1px; }
.ek-acceso .au-err{ background:var(--dan-sf); color:var(--danger); border:1px solid var(--dan-bd); }
.ek-acceso .au-ok{ background:var(--acc-sf); color:var(--ink2); border:1px solid var(--acc-bd); }
.ek-acceso .au-ok.au-espera{ background:var(--warn-sf); color:var(--warn); border-color:var(--warn-bd); }
.ek-acceso .au-pin-hoja .au-recordar-2fa + .au-err, .ek-acceso .au-pin-hoja .au-recordar-2fa + .au-ok{ margin-top:12px; }
.ek-acceso .au-btn[aria-busy="true"]{ opacity:.6; cursor:progress; }
.ek-acceso .au-link{ margin:10px 0 0; font-size:13px; color:var(--mut); text-align:center; }
.ek-acceso .au-link a{ display:inline-flex; align-items:center; min-height:44px; color:var(--acc); font-weight:600; text-decoration:none; }
.ek-acceso .au-link a:hover{ text-decoration:underline; }
.ek-acceso .au-link a:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }
/* La pantalla de éxito: centrada, con aire arriba y abajo (los estilos en línea de login_2fa.php, como clases). */
.ek-acceso .au-pin-exito{ text-align:center; padding-top:56px; padding-bottom:56px; }
.ek-acceso .au-pin-exito .au-pin-escudo{ margin:0; }
.ek-acceso .au-pin-ok{ margin:14px 0 13.5px; font-size:13.5px; font-weight:600; color:var(--ink); outline:none; }
.ek-acceso .micro{ margin:12px 0; font-size:12px; font-weight:500; color:var(--mut); }
/* «Entrando a eServices…» es también un enlace al destino (sin el refresco automático no hay que quedarse ahí): se ve igual. */
.ek-acceso .micro a{ color:inherit; text-decoration:none; }
.ek-acceso .micro a:hover{ text-decoration:underline; text-underline-offset:2px; }
.ek-acceso .micro a:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }
@media (max-width:860px){
  .ek-acceso .au-sub{ display:none; }
  .ek-acceso.au-pin-pagina .au-app-tx{ font-size:13px; }
  .ek-acceso .au-pin-exito{ padding-top:40px; padding-bottom:40px; }
  .ek-acceso .au-dias{ min-height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .ek-acceso .au-app .ek-marca path{ animation:none; stroke-dashoffset:0; }
}

/* >>> 2FA · el escudo y la sacudida de Ekklesia (G2.7: ek_escudo_2fa de su includes/ui.php y su CSS de assets/ekklesia.css,
   copiados tal cual). Componentes de pin.php y del riel «Confirma con tu código» (SRV.conSegundoFactor, assets/srv-ui.js). Este
   bloque va IGUAL en assets/srv.css y en assets/acceso.css —pin.php no carga srv.css—: tools/verificar_ui.php compara los dos y
   tools/verificar_g2_2fa.php los compara, regla por regla, con el de Ekklesia. Solo tokens: el azul literal de Ekklesia
   (rgba(14,42,99,…), su --acc) va como color-mix() de var(--acc), así el tema oscuro lo sigue. Todo movimiento vive en
   @media (prefers-reduced-motion:no-preference): con «reducir» nada se mueve y «confirmado» queda ya dibujado.
     · .ek-escudo-2fa (marcado: srv_escudo_2fa() de includes/srv_ui.php): 4 estados con el candado. activo: el anillo punteado
       POR FUERA gira en 16 s y el pulso respira en 2,6 s; pendiente e inactivo: quietos, borde punteado; confirmado: el
       círculo se traza en 1 s y después el check.
     · .ek-shake: la sacudida del campo cuando el código está mal (sirve para cualquier campo). */
.ek-escudo-2fa{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ek-escudo-2fa-svg{ position:relative; width:100%; height:100%; z-index:1;
  filter:drop-shadow(0 6px 14px color-mix(in srgb, var(--acc) 22%, transparent)); }
.ek-escudo-2fa-escudo{ fill:var(--acc-sf); stroke:var(--acc); stroke-width:1.3; }
.ek-escudo-2fa.pendiente .ek-escudo-2fa-svg{ filter:none; }
.ek-escudo-2fa.pendiente .ek-escudo-2fa-escudo{ fill:var(--warn-sf); stroke:var(--warn); stroke-dasharray:3 2; }
.ek-escudo-2fa.inactivo .ek-escudo-2fa-svg{ filter:none; }
.ek-escudo-2fa.inactivo .ek-escudo-2fa-escudo{ fill:var(--sf2); stroke:var(--ln); stroke-dasharray:3 2; }
/* El candado sigue la paleta de estado del escudo, nunca un color aparte. */
.ek-escudo-2fa-cerrojo-arco{ stroke:var(--acc); }
.ek-escudo-2fa-cerrojo-cuerpo{ fill:var(--acc); }
.ek-escudo-2fa.pendiente .ek-escudo-2fa-cerrojo-arco{ stroke:var(--warn); }
.ek-escudo-2fa.pendiente .ek-escudo-2fa-cerrojo-cuerpo{ fill:var(--warn); }
.ek-escudo-2fa.inactivo .ek-escudo-2fa-cerrojo-arco{ stroke:var(--mut); }
.ek-escudo-2fa.inactivo .ek-escudo-2fa-cerrojo-cuerpo{ fill:var(--mut); }
.ek-escudo-2fa-anillo{ position:absolute; inset:-12%; border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--acc) 22%, transparent); }
.ek-escudo-2fa-pulso{ position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--acc) 14%, transparent), transparent 72%); }
.ek-escudo-2fa.pendiente .ek-escudo-2fa-anillo, .ek-escudo-2fa.pendiente .ek-escudo-2fa-pulso,
.ek-escudo-2fa.inactivo .ek-escudo-2fa-anillo, .ek-escudo-2fa.inactivo .ek-escudo-2fa-pulso{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .ek-escudo-2fa.activo .ek-escudo-2fa-anillo{ animation:ek-escudo-spin 16s linear infinite; }
  .ek-escudo-2fa.activo .ek-escudo-2fa-pulso{ animation:ek-escudo-pulso 2.6s ease-in-out infinite; }
}
@keyframes ek-escudo-spin{ to{ transform:rotate(360deg); } }
@keyframes ek-escudo-pulso{ 0%,100%{ transform:scale(.88); opacity:.55; } 50%{ transform:scale(1.12); opacity:0; } }
/* Confirmado: se dibuja UNA vez —es una confirmación, no una celebración—. */
.ek-escudo-2fa.confirmado .ek-escudo-2fa-circulo{ stroke-dasharray:220; stroke-dashoffset:220; }
.ek-escudo-2fa.confirmado .ek-escudo-2fa-check{ stroke-dasharray:36; stroke-dashoffset:36; }
@media (prefers-reduced-motion:no-preference){
  .ek-escudo-2fa.confirmado .ek-escudo-2fa-circulo{ animation:ek-escudo-trazo 1s ease forwards; }
  .ek-escudo-2fa.confirmado .ek-escudo-2fa-check{ animation:ek-escudo-trazo .6s ease .8s forwards; }
}
@media (prefers-reduced-motion:reduce){
  .ek-escudo-2fa.confirmado .ek-escudo-2fa-circulo, .ek-escudo-2fa.confirmado .ek-escudo-2fa-check{ stroke-dashoffset:0; }
}
@keyframes ek-escudo-trazo{ to{ stroke-dashoffset:0; } }
/* La sacudida corta del campo cuando el código está mal. */
@media (prefers-reduced-motion:no-preference){
  .ek-shake{ animation:ek-shake .4s ease; }
}
@keyframes ek-shake{
  10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); }
}
/* <<< 2FA */

/* >>> pulso.php · «¿Cómo te fue?» (tarea E4): las tres respuestas como botones grandes (radios) y los motivos (casillas). */
.ek-acceso .au-pulso-op, .ek-acceso .au-pulso-mot{ min-width:0; margin:0; padding:0; border:0; }
.ek-acceso .au-pulso-op{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.ek-acceso .au-pulso-op legend, .ek-acceso .au-pulso-mot legend{ grid-column:1 / -1; padding:0; }
.ek-acceso .au-pulso-op label{ position:relative; min-height:52px; padding:6px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ln); border-radius:12px; background:var(--sf2); color:var(--ink); font-size:14.5px; font-weight:600;
  text-align:center; line-height:1.25; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ek-acceso .au-pulso-op input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.ek-acceso .au-pulso-op label:has(input:checked){ border-color:var(--acc); background:var(--acc-sf); color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); }
.ek-acceso .au-pulso-op label:has(input:focus-visible){ outline:2px solid var(--acc); outline-offset:2px; }
.ek-acceso .au-pulso-mot .au-recordar{ margin-top:0; min-height:44px; }
@media (prefers-reduced-motion:reduce){ .ek-acceso .au-pulso-op label{ transition:none; } }
/* <<< pulso.php */