/* =====================================================================
   POLEANA PRO · PANELES
   Todo lo que aparece encima del juego: avisos, confirmaciones, la ficha
   de ingreso y la pantalla de entrada. Un solo formato, sacado de la
   lámina de modales: marco de oro, título en oro grabado, texto centrado
   y los botones abajo.

   La regla de los botones también sale de la lámina:
     · primario   verde   · lo que continúa
     · secundario ámbar   · alternativas de igual peso (entrar con…)
     · destructivo rojo   · lo que quita algo y no se deshace
   ===================================================================== */

.panel{
  border:none; background:transparent; padding:0;
  width:min(560px,94vw); margin:auto; color:var(--crema); overflow:visible;
}
.panel::backdrop{background:#03060499; backdrop-filter:blur(4px)}
.panel-marco{--muesca:14px}
.panel-marco.angosto{max-width:420px; margin:0 auto}
.panel-cara{padding:var(--r4)}

.panel-tit{
  font-family:var(--titulo); font-size:25px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-align:center; line-height:1.2;
}
.folio{
  text-align:center; font-family:var(--ui); font-size:12.5px;
  letter-spacing:.18em; color:var(--tenue); margin-bottom:var(--r4);
}
.aviso-txt{text-align:center; color:var(--crema2); margin:var(--r3) 0 var(--r4)}

.campo{display:block; border:none; margin-bottom:var(--r4)}
.campo .etq{display:block; margin-bottom:7px}

#alias{
  width:100%; padding:9px 12px;
  background:#04160C; border:1.5px solid var(--oro-hondo); border-radius:3px;
  font-family:var(--ui); font-size:20px; font-weight:600; letter-spacing:.05em;
  color:var(--crema);
}
#alias::placeholder{color:#5E6B58}
#alias:focus{border-color:var(--oro); outline:none}

.nota{font-size:13px; line-height:1.45; color:var(--tenue); margin-top:8px}

.pines{display:flex; gap:12px}
.pin{
  width:36px; height:36px; border-radius:50%;
  box-shadow:inset 0 -3px 7px #00000055, 0 0 0 2px #04160C;
  transition:transform .14s ease, box-shadow .14s ease;
}
.pin[data-color="ambar"]  {background:radial-gradient(circle at 35% 30%,#FFD07A,#F2A93B)}
.pin[data-color="crimson"]{background:radial-gradient(circle at 35% 30%,#FF8A82,#E2453D)}
.pin[data-color="verde"]  {background:radial-gradient(circle at 35% 30%,#C4F08A,#7FCB3F)}
.pin[data-color="cyan"]   {background:radial-gradient(circle at 35% 30%,#9BE8F7,#3FBBD6)}

.pin[aria-checked="true"]{box-shadow:inset 0 -3px 7px #00000055, 0 0 0 3px var(--oro-claro)}

.niveles{display:flex; flex-wrap:wrap; gap:7px}
.niv{
  padding:8px 14px; border-radius:3px;
  background:#04160C; box-shadow:inset 0 0 0 1.5px var(--oro-hondo);
  font-family:var(--ui); font-size:14.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--crema2);
  transition:background-color .14s ease, color .14s ease;
}

.niv[aria-checked="true"]{
  background:linear-gradient(180deg,#1A5C2E,#0C3418);
  box-shadow:inset 0 0 0 1.5px var(--oro); color:var(--oro-claro);
}

.antecedentes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--r2);
  padding-top:var(--r3); border-top:1px solid #1E4A2C; margin-bottom:var(--r4);
}
.antecedentes dt{
  font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tenue);
}
.antecedentes dd{font-family:var(--ui); font-size:28px; font-weight:700; color:var(--oro-claro)}

.panel-pie{display:flex; gap:var(--r2); justify-content:center}
/* Las dos salidas van lado a lado, como en la lámina: una encima de otra
   se leen como "primero esto y luego esto", que no es lo que son. */
.panel-pie{flex-wrap:wrap}
/* Los botones se miden por su texto: 'Entrar con cuenta' no cabe en la
   mitad de un panel angosto, y partir la palabra se ve peor que ocupar
   un renglón entero. */
.panel-pie .boton{flex:0 1 auto; max-width:100%}
.panel-pie .cara{white-space:nowrap; padding-left:18px; padding-right:18px}
@media (max-width:400px){
  .panel-pie{flex-wrap:wrap}
  .panel-pie .boton{flex:1 1 100%}
}


/* =====================================================================
   PANTALLA DE ENTRADA
   ===================================================================== */
.entrar-marca{width:min(210px,54%); margin:0 auto var(--r2)}
.entrar-lema{
  text-align:center; color:var(--crema2); font-size:14px;
  margin-bottom:var(--r3);
}
.accesos{display:flex; flex-direction:column; gap:8px; margin-bottom:var(--r2)}
.acceso .cara{
  display:flex; align-items:center; gap:12px; justify-content:flex-start;
  padding:11px 16px;
}
.acceso .marca-icono{
  width:26px; height:26px; flex:none; border-radius:5px;
  display:grid; place-items:center; background:#fff;
}
.acceso .marca-icono svg{width:18px; height:18px; display:block}
.acceso .marca-icono.tiktok{background:#010101}
.acceso .marca-icono.facebook{background:#1877F2}
.acceso .marca-icono.correo{background:transparent; box-shadow:inset 0 0 0 1.5px var(--oro-medio)}
.acceso .rotulo{flex:1; text-align:left; white-space:nowrap}
@media (max-width:400px){
  .acceso .cara{padding:10px 12px; font-size:15px; letter-spacing:.05em}
}

.entrar-o{
  display:flex; align-items:center; gap:12px;
  margin:var(--r2) 0;
  font-family:var(--ui); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tenue);
}
.entrar-o::before,.entrar-o::after{
  content:''; flex:1; height:1px; background:#1E4A2C;
}
.entrar-nota{
  font-size:12.5px; line-height:1.5; color:var(--tenue);
  text-align:center; margin-top:var(--r3);
}

/* La sesión abierta, dentro de la ficha */
.cuenta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--r2);
  padding:10px 12px; margin-bottom:var(--r4);
  background:#04160C; border-radius:3px;
  box-shadow:inset 0 0 0 1.5px var(--oro-hondo);
}
.cuenta-dato{display:flex; flex-direction:column; gap:2px; min-width:0}
.cuenta-dato b{
  font-family:var(--ui); font-size:15px; letter-spacing:.05em; color:var(--crema);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cuenta-dato span{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tenue);
}

/* Mientras se pide la entrada, el lobby no se toca ni se lee: la hoja va
   encima y el fondo se apaga. */
.entrando .lobby > *:not(dialog){filter:blur(2px) brightness(.6)}

#aliasEntrar{
  width:100%; padding:9px 12px;
  background:#04160C; border:1.5px solid var(--oro-hondo); border-radius:3px;
  font-family:var(--ui); font-size:18px; font-weight:600; letter-spacing:.04em;
  color:var(--crema);
}
#aliasEntrar::placeholder{color:#5E6B58}
#aliasEntrar:focus{border-color:var(--oro); outline:none}

/* La hoja de entrada es larga: en pantallas bajas se desplaza sola. */
#hojaEntrar .panel-cara{max-height:88vh; overflow:auto}

/* Cuenta con dueño: el filo se pone verde. Es la única señal de color
   distinta en toda la ficha, así que no hace falta leer para saberlo. */
.cuenta.confirmada{
  box-shadow:inset 0 0 0 1.5px #1B7A3C;
  background:linear-gradient(180deg,#0A2E1A,#04160C);
}
.cuenta.confirmada .cuenta-dato b{color:var(--oro-claro)}

/* --- Rejilla de caras ---------------------------------------------- */
.caras{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  gap:9px;
}
.cara-opcion{
  padding:0; border-radius:50%; line-height:0;
  box-shadow:0 0 0 2px #04160C;
  transition:transform .14s ease, box-shadow .14s ease;
}
.cara-opcion img{width:100%; height:auto; border-radius:50%}
.cara-opcion[aria-checked="true"]{
  box-shadow:0 0 0 2px #04160C, 0 0 0 4px var(--oro-claro);
  transform:translateY(-2px);
}
@media (hover:hover) and (pointer:fine){
  .cara-opcion:hover{transform:translateY(-3px); filter:brightness(1.1)}
}