/* ---------- latón ----------
   El dorado no es «lujo» genérico pegado encima: en un programa cuya paleta es
   papel de croquis, el latón es el metal del instrumental de dibujo — el compás,
   la regla de escala, el limbo del teodolito. Por eso pega con el papel cálido
   sin desentonar, y por eso se usa en filetes finos y no en rellenos.

   Se define aquí y no en delx.css porque solo lo usa este panel; sigue el mismo
   patrón de tres estados que la paleta global (claro / @media oscuro / marca
   explícita), o el tema del sistema se quedaría sin él.

   Contraste sobre el panel: 5.86 en claro y 10.15 en oscuro (AA pide 4.5). El
   tono de los filetes es decorativo y no necesita superarlo. */
:root{
  --oro:#7d5f18; --oro-linea:#c9a227; --oro-suave:#faf4e2;
}
@media (prefers-color-scheme: dark){
  :root{ --oro:#e3c46a; --oro-linea:#c9a227; --oro-suave:#241f12; }
}
:root[data-theme="light"]{ --oro:#7d5f18; --oro-linea:#c9a227; --oro-suave:#faf4e2; }
:root[data-theme="dark"]{  --oro:#e3c46a; --oro-linea:#c9a227; --oro-suave:#241f12; }

/* EMI · paywall.css — panel de cuenta y compra.

   Usa las variables de delx.css (--panel, --line, --accent, --ink…), así que
   hereda el tema claro/oscuro sin definir un solo color propio: si algún día
   cambia la paleta, este panel cambia con ella y no queda descolgado.

   Sin fuentes remotas: la CSP del sitio es `font-src 'self'`, y una @import a
   Google Fonts se bloquearía en silencio dejando la tipografía por defecto. */

/* z-index por ENCIMA de la portada (.landing, 200): el botón «Iniciar sesión /
   Mi cuenta» de la portada abre este mismo modal, y por debajo se abría
   invisible detrás de ella. */
.pw-back{
  position:fixed; inset:0; background:rgba(10,14,22,.62); z-index:220;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.pw-back.open{display:flex}

/* 440px es la medida del formulario de acceso, que son dos campos. La vista de
   compra necesita casi el doble para las tres columnas, y se la da .ancho — que
   pone y quita pwOpen(). Ensanchar SIEMPRE dejaría el formulario de dos campos
   flotando en un panel enorme. */
.pw-panel.ancho{ width:min(760px,100%) }

.pw-panel{
  width:min(440px,100%);
  /* dvh además de vh por el mismo motivo que el visor de PDF: en Safari de iOS
     vh mide el viewport sin la barra de direcciones y el panel se sale por
     abajo. La línea vh queda antes como reserva para quien no entienda dvh. */
  max-height:92vh; max-height:92dvh;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 60px rgba(0,0,0,.4);
  font-family:var(--ui);
  /* Misma cabecera que "Fuerza puntual sobre la barra" (.ldpop-head, ver
     delx.css): banda propia arriba, con el cuerpo aparte para que sea ESE
     el que haga scroll —no el panel entero— y la cabecera (con el cierre)
     se quede siempre a la vista. overflow:hidden recorta el filo cuadrado
     de la cabecera a la esquina redondeada del panel; el propio borde
     redondeado de .ldpop-head sobraría aquí, ya lo hace el padre. */
  display:flex; flex-direction:column; overflow:hidden;
}
/* El cuerpo: el padding que antes llevaba .pw-panel entero, y el scroll
   propio de la lista de proyectos o el historial de movimientos largos.
   min-height:0 es lo que de verdad permite que un hijo flex haga SU PROPIO
   scroll en vez de estirar el panel entero más allá de max-height. */
.pw-body{
  padding:22px 24px 20px; overflow-y:auto; min-height:0;
}
/* El título de cada vista vive en su propio <h2> para que i18n.js lo siga
   traduciendo con su barrido normal (ver pwOpen en paywall.js, que copia su
   texto YA traducido a la cabecera compartida #pwTitle) — pero no se ve
   aquí dos veces, así que se oculta. */
.pw-view-title{ display:none; }
.pw-sub, .pw-why{ margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
/* El «te faltan N» va en tinta normal y algo más presente: es la única frase
   del panel que el usuario NECESITA leer para entender por qué está ahí. */
.pw-why{ color:var(--ink); background:var(--panel-2); border:1px solid var(--line-soft);
         border-radius:8px; padding:9px 11px; }

/* ---------- entrar ---------- */
/* El botón de Google lo pinta Google dentro de un iframe: no se le puede dar
   estilo desde aquí. Lo único que controlamos es el hueco, así que se centra y
   se le deja el ancho que pide. */
.pw-google{ display:flex; justify-content:center; margin:16px 0 0; min-height:44px; }

/* Botón «Continuar con Google», pintado por nosotros (ver montarGoogle en
   paywall.js: el botón oficial se personalizaba y no dejaba elegir cuenta).
   Colores de las pautas de marca de Google — blanco con borde gris en claro,
   casi negro en oscuro — con el mismo patrón de tres estados que el resto de la
   paleta, para que siga al tema sin JS. */
:root{ --g-bg:#ffffff; --g-borde:#747775; --g-tinta:#1f1f1f; --g-hover:#f7f8f8; }
@media (prefers-color-scheme: dark){
  :root{ --g-bg:#131314; --g-borde:#8e918f; --g-tinta:#e3e3e3; --g-hover:#1f2021; }
}
:root[data-theme="light"]{ --g-bg:#ffffff; --g-borde:#747775; --g-tinta:#1f1f1f; --g-hover:#f7f8f8; }
:root[data-theme="dark"]{  --g-bg:#131314; --g-borde:#8e918f; --g-tinta:#e3e3e3; --g-hover:#1f2021; }

.pw-gbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:240px; height:42px; padding:0 18px;
  background:var(--g-bg); color:var(--g-tinta);
  border:1px solid var(--g-borde); border-radius:21px;
  font-family:var(--ui); font-size:14px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:background .15s;
}
.pw-gbtn:hover{ background:var(--g-hover); }
.pw-gbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pw-gbtn svg{ width:18px; height:18px; flex:none; }

/* Separador «o»: dos filetes y la palabra en medio. Marca que son dos caminos
   alternativos, no un paso después de otro. */
.pw-o{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 2px; font-size:11.5px; color:var(--dim);
  text-transform:uppercase; letter-spacing:.1em;
}
.pw-o::before, .pw-o::after{ content:""; flex:1; height:1px; background:var(--line-soft); }

#pwSigninForm{ display:flex; flex-direction:column; gap:9px; margin:14px 0 10px; }
#pwEmail{
  width:100%; box-sizing:border-box;
  padding:10px 12px; font-size:14px; font-family:var(--ui);
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
}
#pwEmail:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
#pwSigninForm .btn{ width:100%; justify-content:center; padding:10px; font-size:14px; }

.pw-ok, .pw-err{ margin:8px 0 0; font-size:13px; line-height:1.5; }
.pw-ok{ color:var(--ok) }
.pw-err{ color:var(--danger) }

.pw-legal{
  margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:11.5px; line-height:1.6; color:var(--ink-soft);
}
.pw-legal a{ color:var(--accent); text-decoration:underline; }

/* ---------- packs ----------
   La tarjeta ya NO es un <button>: lleva una lista dentro, y un <ul> no es
   contenido de frase — el navegador lo expulsaría del botón al parsear y
   desmontaría la maqueta. Ahora es un <div> con un <button> real al pie, que es
   lo que recibe el foco y se activa con Enter.

   Tres columnas para poder COMPARAR: el argumento del pack grande no es su
   precio sino su precio por ejercicio, y eso solo se ve poniendo los tres al
   lado. Apiladas en móvil, donde comparar de un vistazo es imposible igual.

   El latón sube con el nivel (filete tenue en Básico, filete pleno y borde en
   Prime). Eso no es adorno: es la jerarquía de los packs dicha en el único
   idioma que se lee sin leer. */
.pw-packs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin:18px 0 4px;
}

.pw-pack{
  position:relative; display:flex; flex-direction:column;
  text-align:left; padding:16px 14px 14px;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:11px;
  overflow:hidden;
}
/* El filete de latón del canto superior. Es un pseudoelemento y no un
   border-top para poder graduarle la opacidad por nivel sin tocar el resto del
   borde. */
.pw-pack::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--oro-linea) 22%, var(--oro-linea) 78%, transparent);
  opacity:.35;
}
.pw-pack.medio::before{ opacity:.7 }
.pw-pack.prime::before{ opacity:1 }

.pw-pack.medio{ background:linear-gradient(180deg, var(--oro-suave) 0%, var(--panel) 42%); }
.pw-pack.prime{
  border-color:var(--oro-linea);
  background:linear-gradient(180deg, var(--oro-suave) 0%, var(--panel) 55%);
}

.pw-pack-badge{
  position:absolute; top:10px; right:10px;
  background:var(--oro); color:var(--panel);
  font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:2.5px 7px; border-radius:20px; white-space:nowrap;
}

/* Nombre en versalitas espaciadas: dice «etiqueta», no «titular», y deja que el
   número de ejercicios sea lo primero que se lee. */
.pw-pack-nom{
  margin:0; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* El titular es el nº de ejercicios: la única cifra de la tarjeta que se
   entiende sin saber todavía qué es un crédito. Va en tinta, no en latón — el
   latón se reserva para el precio, que es donde tiene que llevar la vista. */
.pw-pack-ej{ margin:6px 0 0; font-size:20px; font-weight:700; line-height:1.1; color:var(--ink); }

.pw-pack-cr{ margin:3px 0 0; font-size:11.5px; color:var(--ink-soft); }
.pw-pack-cr s{ opacity:.5 }
.pw-pack-promo{ color:var(--oro); font-weight:700; }

.pw-pack-precio{
  margin:11px 0 0; font-size:21px; font-weight:700;
  color:var(--oro); letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}

.pw-pack-items{
  list-style:none; margin:11px 0 13px; padding:0;
  flex:1; display:flex; flex-direction:column; gap:6px;
}
.pw-pack-items li{
  position:relative; padding-left:16px;
  font-size:12px; line-height:1.45; color:var(--ink-soft);
}
.pw-pack-items li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--oro-linea); font-weight:700; font-size:11px;
}

.pw-pack-btn{ width:100%; justify-content:center; padding:9px; font-size:13.5px; }
.pw-pack-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Solo el botón del pack superior se viste de latón: siendo el único relleno
   de color del panel, es donde va la vista sin necesidad de nada más. */
.pw-pack.prime .pw-pack-btn{
  background:var(--oro); border-color:var(--oro); color:var(--panel);
}
.pw-pack.prime .pw-pack-btn:hover:not(:disabled){ filter:brightness(1.08) }
/* Señal de que se le hizo caso: sin ella el usuario cree que no ha pulsado y
   vuelve a darle, abriendo un segundo checkout encima del primero. */
.pw-pack.cargando .pw-pack-btn{ opacity:.5 }

/* Las garantías comunes a los tres packs, una sola vez: repetirlas en cada
   tarjeta las convertiría en ruido y robaría el sitio a lo que sí distingue. */
.pw-packs-pie{
  grid-column:1/-1; margin:12px 0 0; padding-top:11px;
  border-top:1px solid var(--line-soft);
  font-size:11.5px; line-height:1.55; color:var(--ink-soft); text-align:center;
}

.pw-nota{ margin:10px 0; font-size:13px; color:var(--ink-soft); }

/* El WhatsApp del aviso de pagos en prueba: es un enlace con aspecto de botón. */
.pw-wa{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
/* Sin esto el display de arriba gana al [hidden] del navegador y el botón de PayPal
   se vería también en Perú, donde no debe salir. */
.pw-wa[hidden]{ display:none; }

/* ---------- cortesía ----------
   Discreto a propósito: es un salvavidas para quien se queda a mitad de un
   ejercicio, no una oferta que deba competir con los packs. Sin fondo ni borde y
   en la misma tinta suave que la letra legal, con el subrayado punteado como
   única señal de que se puede pulsar — quien lo busca lo encuentra, quien venía
   a comprar no se distrae con él. */
.pw-cortesia{ margin:10px 0 0; text-align:center; }
.pw-cortesia button{
  background:none; border:0; padding:2px 4px; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--ink-soft);
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
}
.pw-cortesia button:hover:not(:disabled){ color:var(--ink) }
.pw-cortesia button:disabled{ opacity:.5; cursor:default }
.pw-cortesia button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---------- mi cuenta ---------- */
.pw-email{ margin:0 0 2px; font-size:13px; color:var(--ink-soft); word-break:break-all; }
.pw-saldo{ margin:0 0 16px; font-size:22px; font-weight:700; color:var(--ink); line-height:1.25; }
/* La equivalencia en ejercicios, debajo y en tinta suave: acompaña al número
   sin competir con él. */
.pw-saldo-eq{ display:block; font-size:13px; font-weight:400; color:var(--ink-soft); }

/* Cuenta sin límite: el mismo latón de los packs, porque es exactamente eso —
   el acceso que los packs compran, ya concedido. */
.pw-saldo.ilimitado{ color:var(--oro) }

.pw-movs{ list-style:none; margin:0 0 18px; padding:0; }
.pw-movs li{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:13px;
}
.pw-movs li:last-child{ border-bottom:none }
.pw-delta{ font-family:var(--mono); font-weight:700; min-width:2.2em; }
.pw-delta.pos{ color:var(--ok) }
.pw-delta.neg{ color:var(--ink-soft) }
.pw-motivo{ color:var(--ink) }
.pw-fecha{ color:var(--dim); font-size:11.5px; white-space:nowrap; }
.pw-mov-vacio{ color:var(--ink-soft); font-size:13px; }

/* Qué estructura fue, debajo del motivo. Sin esto, diez cargos de «Paso a paso
   exportado» son diez líneas idénticas y ninguna se puede reconocer. */
.pw-mov-que{ display:block; font-size:11px; color:var(--dim); margin-top:1px; }

/* Los dos accesos a la resolución. Monoespaciados y pequeños: son etiquetas
   técnicas ({ } y PDF), no botones de acción principal — el peso visual del
   panel tiene que seguir estando en el saldo. */
.pw-mov-acc{ display:flex; gap:4px; }
.pw-mov-btn{
  font-family:var(--mono); font-size:10px; line-height:1;
  padding:4px 6px; cursor:pointer;
  background:var(--panel-2); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:5px;
}
.pw-mov-btn:hover:not(:disabled){ border-color:var(--oro-linea); color:var(--oro); }
.pw-mov-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.pw-mov-btn:disabled{ opacity:.45; cursor:default; }

/* ---------- mis proyectos ----------
   Misma lista visual que los movimientos de la cuenta (nombre arriba, meta en
   gris, botones a la derecha), para que el usuario no tenga que aprender dos
   patrones. */
.pw-proj-save{ display:flex; gap:8px; margin:12px 0 10px; }
.pw-proj-save input{
  flex:1; min-width:0; box-sizing:border-box;
  padding:9px 11px; font-size:13.5px; font-family:var(--ui);
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
}
.pw-proj-save input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.pw-proj-save .btn{ white-space:nowrap; padding:9px 12px; font-size:13px; }

/* «＋ Nuevo proyecto»: acción secundaria, ancho completo, entre el bloque de
   guardar y la lista de proyectos guardados. */
.pw-proj-new{ width:100%; margin:10px 0 2px; padding:9px 12px; font-size:13px; }

.pw-projs{ list-style:none; margin:10px 0 0; padding:0; }
.pw-projs li{
  display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.pw-projs li:last-child{ border-bottom:none; }
/* El nombre del proyecto ES el botón de abrir: se reinicia el aspecto de
   <button> para que se lea como el texto que era, y solo el hover/foco delata
   que se puede pulsar. justify-self:start deja el blanco de clic pegado al
   texto, no estirado por toda la columna. */
.pw-proj-nom{
  grid-column:1; justify-self:start;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
  text-align:left; word-break:break-word;
  background:none; border:0; padding:0; cursor:pointer;
}
.pw-proj-nom:hover:not(:disabled){ color:var(--oro); text-decoration:underline; }
.pw-proj-nom:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.pw-proj-nom:disabled{ opacity:.5; cursor:default; text-decoration:none; }
.pw-proj-meta{
  grid-column:1; font-size:11px; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.pw-projs .pw-mov-acc{ grid-row:1 / span 2; grid-column:2; align-self:center; }
.pw-proj-del:hover:not(:disabled){ border-color:var(--danger); color:var(--danger); }
.pw-proj-vacio{ color:var(--ink-soft); font-size:13px; padding:10px 0; }

/* Enlace, no botón: borrar es una acción secundaria y rara, y con aspecto de
   botón competiría con «Recargar», que es lo que sí queremos que se pulse. */
.pw-acc-borrar{ margin:0 0 14px; }
.pw-acc-borrar button{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--ui); font-size:11.5px; color:var(--dim);
  text-decoration:underline; text-underline-offset:2px;
}
.pw-acc-borrar button:hover:not(:disabled){ color:var(--danger); }
.pw-acc-borrar button:disabled{ opacity:.5; cursor:default; }

.pw-acc-btns{ display:flex; gap:9px; }
.pw-acc-btns .btn{ flex:1; justify-content:center; padding:9px; }

/* Por debajo de 640px las tres columnas dejan de caber y comparar de un vistazo
   es imposible igualmente: se apilan, y el latón sigue marcando el nivel. */
@media (max-width:640px){
  .pw-packs{ grid-template-columns:1fr; gap:12px; }
}

@media (max-width:480px){
  .pw-panel{ padding:22px 18px 18px; border-radius:12px; }
  .pw-panel h2{ font-size:17px }
}