/* css/auth-modal.css — el modal de cuenta.
 *
 * Fichero aparte y no un bloque mas en global.css porque global.css termina con
 * varios `@media` y meter reglas normales detras dispara CSS_MEDIA_ORDER en el
 * linter — un aviso nuevo por una razon que no tiene nada que ver con el codigo.
 *
 * El panel tiene dos mitades. La izquierda —la boveda— SOLO sale al registrarse:
 * quien viene a entrar ya sabe para que es la cuenta, y ponerle un anuncio
 * delante del campo de usuario es estorbarle. Lo decide `data-mode` en el propio
 * panel, que pone `openModal()` en js/auth.js.
 */

/* La capa de fondo estaba entera en un `style=` de header.php. Se mueve aqui
   porque el modal ya no cabe en una linea de atributos, y `#profile-modal` —que
   comparte la clase— lleva los mismos valores, asi que no cambia de aspecto.
   El `display` sigue siendo cosa del JS: alterna entre `none` y `flex`. */
.auth-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:9999;
  justify-content:center;align-items:center;
}

/* Fondo, marco y `position` vivian en el `style=` que llevaba este panel. Al
   sacarlos hay que ponerlos: sin `position:relative` la equis se va a la esquina
   de la pantalla, y sin fondo el modal se lee encima de la portada. */
.auth-panel{
  position:relative;display:flex;align-items:stretch;gap:0;overflow:hidden;
  padding:0 !important;width:min(94vw,860px);max-width:860px;
  background:var(--dark-1,#141414);color:#fff;
  border:1px solid var(--gold);border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
}
.auth-panel[data-mode="login"] .auth-vault{display:none;}
.auth-panel[data-mode="login"]{width:min(94vw,420px);}

.auth-x{
  position:absolute;top:10px;right:14px;z-index:2;background:transparent;border:none;
  color:var(--text-dim);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;
}

/* ── La boveda ──────────────────────────────────────────────────────────── */
.auth-vault{
  flex:0 0 44%;display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-8) var(--sp-6);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212,168,67,0.16), transparent 62%),
    linear-gradient(180deg,#101015,#0a0a0d);
  border-right:1px solid rgba(212,168,67,0.22);
}
.auth-farol{display:block;width:118px;height:auto;margin:0 auto;filter:drop-shadow(0 0 22px rgba(212,168,67,0.28));}

/* El recuento es el argumento entero: lo que ya has hecho y donde vive hoy. Va
   oculto mientras no haya nada marcado, porque «0 items» invita a marcharse. */
.auth-vault-n{margin:0;text-align:center;line-height:1.35;}
.auth-vault-n b{
  display:block;font-family:var(--font-display),sans-serif;font-size:2.6rem;line-height:1;
  color:var(--gold);letter-spacing:0.02em;font-variant-numeric:tabular-nums;
}
.auth-vault-n span{display:block;font-size:0.8rem;color:var(--text-muted);margin-top:var(--sp-1);}

/* La vista previa del rango. Va dentro de un marco propio para que se lea como
   algo YA conseguido y no como una promesa mas de la lista de abajo. */
.auth-premio{border:1px solid rgba(212,168,67,0.28);border-radius:8px;padding:var(--sp-3) var(--sp-4);background:rgba(212,168,67,0.06);}
.auth-premio h4{margin:0 0 var(--sp-2);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);font-weight:600;}
.auth-premio-rango{display:flex;align-items:baseline;gap:var(--sp-2);margin:0;font-family:var(--font-ui),sans-serif;font-size:1.02rem;font-weight:700;color:var(--text);}
.auth-premio-icono{font-size:1.15rem;line-height:1;}
.auth-premio-pct{margin-left:auto;font-size:0.82rem;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;}
.auth-premio-barra{height:5px;border-radius:3px;background:rgba(255,255,255,0.1);margin:var(--sp-3) 0 var(--sp-2);overflow:hidden;}
.auth-premio-barra i{display:block;height:100%;min-width:3px;border-radius:3px;background:var(--gold);}
.auth-premio-falta{margin:0;font-size:0.76rem;color:var(--text-muted);line-height:1.4;}

/* La tarjeta: una replica en HTML de la que dibuja api/progress-card.php, a
   escala. Las proporciones son las suyas —1200x630— y el orden de los elementos
   tambien, para que la vista previa no prometa una cosa y el enlace ensene otra.
   Si aquella cambia, esta hay que cambiarla al lado. */
.auth-tarjeta{margin:0;}
.auth-tarjeta-marco{
  position:relative;aspect-ratio:1200/630;border-radius:6px;overflow:hidden;
  background:#0a0a0c center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.1);
  padding:11% 6% 0;box-sizing:border-box;
  display:flex;flex-direction:column;
}
.auth-tarjeta-marco::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold);}
.auth-tarjeta-marco::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,0.62),rgba(8,8,10,0.85));}
.auth-tarjeta-marco > *{position:relative;z-index:1;}
.auth-tarjeta-marca{font-size:0.5rem;letter-spacing:0.18em;color:var(--gold);font-weight:700;}
.auth-tarjeta-juego{font-family:'Cinzel',serif;font-size:1.05rem;line-height:1.1;color:var(--text);margin-top:2px;
                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.auth-tarjeta-user{font-size:0.6rem;color:var(--gold-light,#f0c96a);margin-top:1px;}
.auth-tarjeta-num{font-family:'Cinzel',serif;font-size:1.5rem;line-height:1;color:var(--text);margin-top:auto;font-variant-numeric:tabular-nums;}
.auth-tarjeta-pct{font-size:0.58rem;color:var(--text-muted);margin-top:2px;}
.auth-tarjeta-barra{height:4px;border-radius:2px;background:#26262c;margin:6px 0 9%;overflow:hidden;}
.auth-tarjeta-barra i{display:block;height:100%;background:var(--gold);}
.auth-tarjeta figcaption{margin-top:var(--sp-2);font-size:0.7rem;color:var(--text-muted);text-align:center;line-height:1.4;}

/* Con algo que ensenar, el Farolero cede sitio: la ilustracion es lo que menos
   aporta cuando ya hay cifras propias en pantalla. */
.auth-panel.con-datos .auth-farol{width:70px;}

.auth-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4);}
.auth-perks li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:0.84rem;line-height:1.5;color:var(--text-dim);}
.auth-perks b{display:block;color:var(--text);font-family:var(--font-ui),sans-serif;font-size:0.92rem;letter-spacing:0.01em;}
.auth-perks .gv-icono{flex:none;width:16px;height:16px;margin-top:3px;fill:var(--gold);}

/* ── La mitad del formulario ────────────────────────────────────────────── */
.auth-main{flex:1 1 auto;padding:var(--sp-8) var(--sp-6);min-width:0;}
.auth-lead{margin:calc(var(--sp-2) * -1) 0 var(--sp-6);font-size:0.86rem;color:var(--text-muted);line-height:1.5;}

/* El formulario es una columna flexible para poder MOVER el bloque de Google sin
   tocar el DOM: al registrarte va el primero —no tienes contraseña que teclear,
   asi que el camino de un clic es el camino—, y al entrar se queda debajo, que
   es donde lo puso la decision de css/global.css y sigue siendo la buena para
   quien ya tiene cuenta con contraseña. */
#auth-form{display:flex;flex-direction:column;}
#auth-sso{order:5;}
.auth-panel[data-mode="register"] #auth-sso{order:-1;margin-top:0;}

/* Y ahi dentro, el separador pasa DEBAJO del boton. Arriba del todo, un «or»
   no separa nada: lo primero que se ve al registrarse es una conjuncion suelta.
   Debajo si dice lo que tiene que decir — Google, o rellena esto. */
.auth-panel[data-mode="register"] #auth-sso{display:flex;flex-direction:column-reverse;}
.auth-panel[data-mode="register"] #auth-sso .gv-sso-sep{margin:var(--sp-4) 0 0;}

@media(max-width:760px){
  /* En estrecho la boveda va ARRIBA y sin los tres argumentos: en una pantalla
     de movil empujarian el formulario fuera de la vista, y el que convence —el
     recuento— cabe de sobra. */
  .auth-panel{flex-direction:column;width:min(94vw,420px);}
  .auth-vault{flex:none;border-right:none;border-bottom:1px solid rgba(212,168,67,0.22);padding:var(--sp-6) var(--sp-6) var(--sp-4);}
  /* Y la tarjeta con ellas: en vertical son 16:9 mas su pie, y empujarian el
     formulario fuera de la primera pantalla. El recuento y el rango, que son lo
     personal, si caben. */
  .auth-perks, .auth-tarjeta{display:none;}
  .auth-farol{width:78px;}
  .auth-main{padding:var(--sp-6);}
}