/* ══════════════════════════════════════════════════════════════════════
   EL POP-UP DE ENTRAR — componente de todo el producto
   ══════════════════════════════════════════════════════════════════════
   Estaba partido en dos: los estilos BASE en courses.css y los ajustes
   oscuros en ideas.css, duplicados entre sí. Al llevarlo a la portada se
   vio el problema — llegué a mover solo los ajustes, y el pop-up salió
   pintado en el flujo al final de la página, sin position ni display.

   AUTOSUFICIENTE A PROPÓSITO: usaba veintiún tokens del dashboard
   (--text-main, --accent, --bg-soft…) que en la portada no existen. Ahora
   los declara aquí con var(TOKEN, respaldo): dentro del dashboard toma los
   suyos y hereda su tema; fuera cae a los neutros de la app. Así el
   componente se pega donde sea sin arrastrar una hoja entera.
   ══════════════════════════════════════════════════════════════════════ */

.auth-modal {
  --am-panel: var(--bg-panel,          #16161A);
  --am-fondo: var(--bg-main,           #0F0F11);
  --am-soft:  var(--bg-soft,           #26262C);
  --am-elev:  var(--bg-elevated,       #26262C);
  --am-tx:    var(--text-main,         #F4F4F6);
  --am-tx2:   var(--text-soft,         #A0A0AC);
  --am-tx3:   var(--text-muted,        #80808A);
  --am-inv:   var(--text-invert,       #1A1206);
  --am-bs:    var(--border-soft,       rgba(255,255,255,.10));
  --am-bm:    var(--border-mid,        rgba(255,255,255,.16));
  --am-oro:   var(--brand-orange,      #FF8A00);
  --am-oro-m: var(--brand-orange-mid,  #E67A00);
  --am-acc:   var(--accent,            #FF8A00);
  --am-acc-s: var(--accent-soft,       rgba(255,138,0,.18));
  --am-verde: var(--green,             #28A745);
  --am-rojo:  var(--red,               #DC3545);
  --am-r:     var(--r-sm,              10px);
  --am-sx:    var(--shadow-xl,         0 24px 64px rgba(0,0,0,.55));
  --am-sa:    var(--shadow-accent,     0 8px 24px rgba(255,138,0,.3));
  --am-tr:    var(--tr-fast,           .16s ease);
  --am-tre:   var(--tr-e,              cubic-bezier(.22,1,.36,1));
  --am-tr2:   var(--tr,                .2s ease);
}

/* ── AUTH MODAL — el mismo pop-up de ideas.html, en tokens ─────────
   (auth_modal.js cablea el comportamiento; estos son sus estilos,
   versión tokens del bloque de ideas.css para que viva aquí sin
   arrastrar ese archivo entero.) ── */
.auth-modal {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(6, 6, 8, 0.38);
  align-items: center; justify-content: center;
  padding: 20px;
}
[data-theme="light"] .auth-modal { background: rgba(20, 20, 24, 0.48); }
.auth-modal.open { display: flex; animation: auth-fade-in 0.3s ease; }
.auth-modal.is-closing { display: flex; animation: auth-fade-out 0.24s ease forwards; }
.auth-modal.is-closing .auth-card { animation: auth-card-out 0.24s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes auth-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes auth-card-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}
.auth-card {
  position: relative;
  width: 100%; max-width: 440px;
  padding: 32px 28px;
  background: var(--am-panel);
  border: 1px solid var(--am-bm);
  border-radius: 20px;
  box-shadow: var(--am-sx);
  animation: auth-pop-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes auth-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.auth-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--am-bs);
  border-radius: 10px;
  background: var(--am-soft); color: var(--am-tx3);
  cursor: pointer; opacity: 0.7;
  transition: opacity var(--am-tre), color var(--am-tre);
}
.auth-modal-close:hover { opacity: 1; color: var(--am-tx); }
.auth-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 0 auto 18px;
}
.auth-brand img { height: 36px; width: auto; display: block; }
.auth-brand-text {
  font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
  line-height: 1; display: inline-flex;
}
.auth-brand-text span:first-child { color: var(--am-tx); }
.auth-brand-text span:last-child  { color: var(--am-oro); }
.auth-title {
  font-size: 22px; font-weight: 800; color: var(--am-tx);
  text-align: center; letter-spacing: -0.3px; margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 14px; color: var(--am-tx2);
  text-align: center; line-height: 1.5; margin-bottom: 18px;
}
.auth-features {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--am-soft);
  border: 1px solid var(--am-bs);
  padding: 12px 14px; border-radius: var(--am-r);
  margin-bottom: 22px;
}
.auth-feat {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--am-tx2); font-weight: 600;
}
.auth-feat i { color: var(--am-verde); font-size: 14px; }
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px;
  border-radius: var(--am-r);
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--am-bs);
  background: var(--am-panel); color: var(--am-tx);
  margin-bottom: 8px;
  transition: var(--am-tr);
}
.auth-btn:hover { border-color: var(--am-tx2); transform: translateY(-1px); }
.auth-btn i { font-size: 18px; }
.auth-btn--apple { background: var(--am-soft); border-color: var(--am-bm); }
.auth-btn--apple:hover { background: var(--am-elev); }
.auth-btn--email {
  background: var(--am-oro); color: var(--am-inv);
  border-color: var(--am-oro);
  box-shadow: var(--am-sa);
}
.auth-btn--email:hover { background: var(--am-oro-m); border-color: var(--am-oro-m); }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--am-tx3); letter-spacing: 1px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--am-bs);
}
.auth-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--am-bs); border-radius: 11px;
  background: var(--am-fondo); color: var(--am-tx);
  font-family: inherit; font-size: 14px; outline: none;
  margin-bottom: 8px;
  transition: border-color var(--am-tre), box-shadow var(--am-tre);
}
.auth-input:focus { border-color: var(--am-acc); box-shadow: 0 0 0 3px var(--am-acc-s); }
.auth-input::placeholder { color: var(--am-tx3); }
/* GIS mide la posición de su botón para detectar clickjacking: solo se
   contiene el desborde, sin capas encima. */
.auth-google-host {
  display: flex; justify-content: center;
  margin-bottom: 8px; min-height: 44px;
  overflow: hidden; border-radius: 12px;
}
.auth-google-host > div { width: auto !important; max-width: 100%; }
.auth-error {
  background: color-mix(in srgb, var(--am-rojo) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--am-rojo) 32%, transparent);
  color: var(--am-rojo);
  border-radius: 8px; padding: 9px 12px;
  font-size: 13px; font-weight: 700;
  margin: -2px 0 10px; line-height: 1.45;
}
.auth-error[hidden] { display: none; }
.auth-foot { text-align: center; font-size: 13px; color: var(--am-tx3); margin-top: 16px; }
.auth-foot a { color: var(--am-oro); font-weight: 700; cursor: pointer; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-later {
  width: 100%; margin-top: 10px; padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--am-bs); border-radius: 10px;
  color: var(--am-tx3);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color var(--am-tre), border-color var(--am-tre);
}
.auth-later:hover { color: var(--am-tx); border-color: var(--am-bm); }
.auth-later[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   EL POP-UP DE ENTRAR  (Edgar 2026-08-04)

   Edgar: "sin efecto blur por fuera, que sea como un pop up, y el css
   mejoraselo, oscuro como debe de ser".

   SIN BLUR, y no es solo gusto: `backdrop-filter` obliga al navegador a
   recomponer TODO lo que hay debajo en cada cuadro. Detras vive el chat con
   su lista, y en la pantalla de entrada esta el motor de Pio corriendo. Es
   el efecto mas caro que existe puesto sobre lo mas pesado que tenemos.

   Un velo oscuro y opaco separa igual de bien y no cuesta nada. Lo que hace
   que algo se lea como POP-UP no es el desenfoque: es que se despegue del
   fondo — sombra larga, borde propio y una entrada con resorte.

   OSCURO DE VERDAD: aqui seguian los grises azulados (#F1F5F9, #0F172A) de
   la paleta vieja, la misma que quitamos hoy del login y del dashboard.
   Ahora toma los tokens del producto, asi que si mañana cambia el tema, el
   pop-up cambia con el en vez de quedarse atras.
   ═════════════════════════════════════════════════════════════════════ */
.auth-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* 0.38 y no 0.72: Edgar quiere VER el fondo. Un pop-up separa por estar
     encima, no por borrar lo de abajo. */
  background: rgba(6, 6, 8, 0.38) !important;
}
[data-theme="light"] .auth-modal { background: rgba(20, 20, 24, 0.48) !important; }

/* La tarjeta: un objeto que flota, no un panel pegado al fondo. */
.auth-modal .auth-card {
  background: var(--am-panel) !important;
  border: 1px solid var(--am-bm) !important;
  border-radius: 20px !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.62),
    0 12px 32px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  animation: auth-pop-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes auth-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Texto y superficies: de la paleta vieja a los tokens del producto. */
.auth-modal .auth-title    { color: var(--am-tx) !important; }
.auth-modal .auth-subtitle { color: var(--am-tx2) !important; }
.auth-modal .auth-features {
  background: var(--am-soft) !important;
  border: 1px solid var(--am-bs) !important;
}
.auth-modal .auth-feat     { color: var(--am-tx2) !important; }
.auth-modal .auth-divider  { color: var(--am-tx3) !important; }
.auth-modal .auth-divider::before,
.auth-modal .auth-divider::after { background: var(--am-bs) !important; }

/* Los campos SE VEN en reposo. Iban a 0.03 de relleno sobre casi negro: el
   mismo fallo que el login tenia — un input que no parece un input hace
   dudar si la pagina cargo bien. */
.auth-modal .auth-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--am-tx) !important;
  border-radius: 11px !important;
}
.auth-modal .auth-input::placeholder { color: var(--am-tx3) !important; opacity: 0.75; }
.auth-modal .auth-input:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.auth-modal .auth-input:focus {
  border-color: var(--am-acc) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 0 3px var(--am-acc-s) !important;
}

/* La ✕: estaba a plena opacidad compitiendo con el titulo. Cerrar no es lo
   que quieres que la gente haga aqui. */
.auth-modal .auth-modal-close {
  background: var(--am-soft) !important;
  border: 1px solid var(--am-bs) !important;
  color: var(--am-tx3) !important;
  opacity: 0.7;
  transition: opacity var(--am-tr2) ease, color var(--am-tr2) ease, background var(--am-tr2) ease;
}
.auth-modal .auth-modal-close:hover { opacity: 1; color: var(--am-tx) !important; }

/* El boton de Apple traia #0F172A — azul marino de la paleta vieja. */
.auth-modal .auth-btn--apple {
  background: var(--am-soft) !important;
  color: var(--am-tx) !important;
  border-color: var(--am-bm) !important;
}
.auth-modal .auth-btn--apple:hover { background: var(--am-elev) !important; }

/* NADA de esto toca el contenedor del boton de Google: GIS mide su posicion
   para detectar clickjacking y ya bloqueo el login una vez. Aqui solo se
   contiene su desborde, igual que en la pagina — sin capas encima. */
.auth-modal .lm-google-host,
.auth-modal [id*="google"] {
  overflow: hidden;
  border-radius: 12px;
  background: var(--am-panel);
}

@media (prefers-reduced-motion: reduce) {
  .auth-modal .auth-card { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LOS TRES CAMPOS QUE FALTABAN  (Edgar 2026-08-18)

   El servidor pide fecha de nacimiento, @usuario y aceptación de términos
   desde que se endureció el alta; el pop-up seguía mandando tres campos y
   devolvía 400 a TODO EL MUNDO. Nadie podía crear cuenta por correo.

   El markup lo inyecta auth_modal.js —una sola definición para las tres
   páginas que hospedan el modal—, así que aquí sólo viven sus estilos.
   ══════════════════════════════════════════════════════════════════════ */

.auth-extra[hidden] { display: none; }
.auth-extra { animation: auth-extra-in .32s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes auth-extra-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Etiqueta encima del campo, no placeholder dentro: un placeholder
   desaparece al escribir y «08/1990» sin etiqueta no dice de qué es. */
.auth-modal .auth-lab {
  display: block;
  margin: 12px 2px 6px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--am-tx3);
}
.auth-modal .auth-hint {
  margin: -2px 2px 10px;
  font-size: 12px; line-height: 17px; font-weight: 600;
  color: var(--am-tx3);
}
.auth-modal .auth-hint.is-ok  { color: var(--am-verde); }
.auth-modal .auth-hint.is-mal { color: var(--am-rojo); }

/* SITIO RESERVADO PARA LAS DOS LÍNEAS. La pista del arroba cambia sola
   («Es tu dirección pública…» → «Libre. Es tuyo.») y al encogerse de dos
   líneas a una, TODO lo de abajo —la casilla de términos y el botón—
   sube 17px justo mientras la persona va a tocarlos. En el escritorio
   molesta; en un móvil es tocar lo que no era. Se guarda el hueco y no
   se mueve nada. (Salió midiendo: un clic de prueba erraba el objetivo
   por ese salto.) */
.auth-modal #auth-usuario-hint { min-height: 34px; }

/* El calendario nativo del navegador se pinta con color-scheme; sin esto
   sale un icono negro sobre fondo casi negro y parece que no hay nada
   que tocar. Va por tema porque el modal vive en la portada (oscura
   siempre) y en el dashboard (claro por defecto). */
.auth-modal .auth-input--fecha { color-scheme: dark; }
html:not([data-theme="dark"]):not([data-theme="negro"]) .auth-modal .auth-input--fecha {
  color-scheme: light;
}

/* ── El arroba ─────────────────────────────────────────────────────
   La @ va FUERA del campo escribible: si estuviera dentro, la gente la
   borra o la escribe dos veces, y el servidor recibe «@@maria». */
.auth-at { position: relative; }
.auth-modal .auth-at-sign {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 800; color: var(--am-tx3);
  pointer-events: none;
}
.auth-modal .auth-at-input { padding-left: 29px; padding-right: 36px; }
.auth-modal .auth-at-flag {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 900; line-height: 1;
  pointer-events: none;
  opacity: 0; transition: opacity var(--am-tr2) ease;
}
.auth-modal .auth-at-flag.is-ok  { color: var(--am-verde); opacity: 1; }
.auth-modal .auth-at-flag.is-mal { color: var(--am-rojo);  opacity: 1; }

/* ── Términos: acto afirmativo, mismo criterio que el consentimiento de
   cobro de profile.html. Los enlaces van FUERA de la etiqueta: dentro,
   un clic en «Términos» marcaría además la casilla, y eso es hacer
   aceptar sin querer justo lo que hay que aceptar queriendo. ── */
.auth-legal {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  margin: 14px 0 8px;
  font-size: 12.5px; color: var(--am-tx3);
}
.auth-modal .auth-legal a {
  color: var(--am-oro); font-weight: 700; text-decoration: none;
  border-radius: 4px;
}
.auth-modal .auth-legal a:hover { text-decoration: underline; }
.auth-modal .auth-legal a:focus-visible { outline: 2px solid var(--am-acc); outline-offset: 3px; }

.auth-terms {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--am-bs); border-radius: var(--am-r);
  background: var(--am-soft);
  cursor: pointer;
  transition: border-color var(--am-tre);
}
.auth-terms:hover { border-color: var(--am-bm); }
.auth-terms input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.auth-terms-box {
  flex: 0 0 auto; margin-top: 1px;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  border: 1.5px solid var(--am-bm);
  background: transparent; color: transparent;
  transition: background var(--am-tre), border-color var(--am-tre), color var(--am-tre);
}
.auth-terms input:checked + .auth-terms-box {
  background: var(--am-oro); border-color: var(--am-oro); color: var(--am-inv);
}
.auth-terms input:focus-visible + .auth-terms-box {
  outline: 2px solid var(--am-acc); outline-offset: 2px;
}
.auth-terms-txt {
  font-size: 13px; line-height: 18.5px; font-weight: 700;
  color: var(--am-tx);
}

/* El botón apagado hasta que se marque. Apagado DE VERDAD —sin sombra ni
   levantarse al pasar por encima—, porque un botón que reacciona parece
   que funciona y deja a la persona pulsando sin entender. El porqué lo
   dice el texto de al lado (#auth-acepta-hint), no se deja adivinar. */
.auth-modal .auth-btn[disabled] {
  opacity: .45; cursor: not-allowed; box-shadow: none; transform: none;
}
.auth-modal .auth-btn[disabled]:hover {
  transform: none; border-color: var(--am-oro); background: var(--am-oro);
}

/* La nota de la edad NO es un error rojo: no haber cumplido 13 no es un
   fallo de quien lo intenta. Misma caja, tono neutro. */
.auth-modal .auth-error--nota {
  background: var(--am-soft);
  border-color: var(--am-bs);
  color: var(--am-tx2);
  font-weight: 700;
}

/* ── LOS CAMPOS SE VEN TAMBIÉN EN TEMA CLARO ───────────────────────
   El bloque de arriba pinta TODOS los .auth-input con un velo blanco
   sobre casi negro (rgba(255,255,255,.05) y borde blanco al 14%). En la
   portada, que es oscura siempre, se ve. En el dashboard el tema por
   defecto es el CLARO: ahí eso es blanco sobre blanco con un borde
   invisible — seis campos que no parecen campos. Se arregla aquí porque
   los tres nuevos nacen con el mismo problema. */
html:not([data-theme="dark"]):not([data-theme="negro"]) .auth-modal .auth-input {
  background: rgba(15, 15, 20, .035) !important;
  border-color: var(--am-bm) !important;
}
html:not([data-theme="dark"]):not([data-theme="negro"]) .auth-modal .auth-input:hover:not(:focus) {
  background: rgba(15, 15, 20, .055) !important;
  border-color: var(--am-tx3) !important;
}
html:not([data-theme="dark"]):not([data-theme="negro"]) .auth-modal .auth-input:focus {
  background: rgba(15, 15, 20, .02) !important;
}

/* ── EL POP-UP TIENE QUE CABER ──────────────────────────────────────
   Con tres campos más, en un móvil de 360×640 la tarjeta pasa de alto de
   pantalla. Centrada y sin scroll, el botón de crear cuenta se queda
   FUERA y no hay forma de llegar a él: el alta volvería a ser imposible,
   ahora por otro motivo. `margin: auto` vertical centra cuando cabe y se
   rinde a 0 cuando no, dejando que el velo scrollee. */
.auth-modal { overflow-y: auto; align-items: flex-start; }
.auth-modal .auth-card { margin-top: auto; margin-bottom: auto; }

@media (max-width: 400px) {
  .auth-modal { padding: 14px; }
  .auth-modal .auth-card { padding: 24px 18px; }
  .auth-terms-txt { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-extra { animation: none; opacity: 1; transform: none; }
  .auth-modal .auth-at-flag { transition: none; }
}