/* cuenta.css — la barra de cuenta del vestíbulo.
   Vive arriba a la izquierda, en la misma fila que el botón de código y a su
   izquierda. Está en el flujo, no flotando: antes era `position:absolute` y se
   montaba encima del menú, y al desplegar la oferta de importar progreso tapaba
   la primera tarjeta. Ocupa poco a propósito: entrar con Google es una
   comodidad, no la puerta del juego. */

#cuenta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-width: 0; max-width: min(430px, 100%);
  padding: 6px 10px;
  border: 1px solid #d9c47740; border-radius: 11px;
  background: #0a100bcc; box-shadow: 0 8px 24px #0006;
  backdrop-filter: blur(10px);
  font-size: 12px;
}
#cuenta[hidden] { display: none; }

.cuenta-entrar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid #728c4a; border-radius: 7px;
  background: #26351f; color: #eee6d2;
  font-weight: 700; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.cuenta-entrar:hover { border-color: #e8c96a; background: #2e4126; transform: translateY(-1px); }
.cuenta-g {
  display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; color: #1a73e8;
  font: 800 11px/1 Georgia, serif;
}
.cuenta-ayuda { color: #9fae95; font-size: 11px; }

.cuenta-avatar {
  display: grid; place-items: center; overflow: hidden;
  width: 26px; height: 26px; flex: none;
  border: 1px solid #d9c47766; border-radius: 50%;
  background: #1b2a19; color: var(--oro);
  font: 800 11px/1 Inter, system-ui, sans-serif;
}
.cuenta-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cuenta-nombre { color: #eee6d2; font-size: 13px; }
.cuenta-salir {
  padding: 4px 9px; border-color: #d9c47740; background: #17211a;
  color: #b9c2ae; font-size: 11px; font-weight: 700;
}
.cuenta-salir:hover { border-color: #e8c96a80; color: #eee6d2; }

/* La oferta de subir el progreso local. Se despliega debajo de la barra y no
   se repite: el servidor sólo acepta una importación por cuenta. */
.cuenta-importar {
  flex-basis: 100%;
  margin-top: 4px; padding: 9px 10px;
  border: 1px solid #e8c96a4d; border-radius: 9px;
  background: #14200fdd;
}
.cuenta-importar p { margin: 0 0 6px; color: #cbd4bf; font-size: 11.5px; line-height: 1.45; }
.cuenta-importar-detalle { color: #e8c96a !important; font-weight: 700; }
.cuenta-importar-acciones { display: flex; gap: 7px; }
.cuenta-importar-si { padding: 5px 11px; font-size: 11px; }
.cuenta-importar-no { padding: 5px 11px; border-color: #d9c47733; background: #17211a; color: #9fae95; font-size: 11px; }

@media (max-width: 640px) {
  .vestibulo-barra { flex-wrap: wrap; padding: 10px 14px 0; }
  #cuenta { max-width: none; }
  .cuenta-ayuda { display: none; }
}

/* El nombre propio es un botón: abre el perfil. Sigue leyéndose como texto —no
   como control— porque en una barra de seis píxeles de aire un botón con marco
   compite con «Entrar con Google», que sí es la acción principal. */
button.cuenta-nombre {
  padding: 2px 4px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: #eee6d2; font: 700 13px/1.3 Inter, system-ui, sans-serif;
  cursor: pointer;
}
button.cuenta-nombre:hover { border-color: #d9c47755; background: #ffffff0d; }
button.cuenta-nombre:focus-visible { border-color: var(--oro); outline: none; }

/* La puerta al perfil cuando no hay un nombre que tocar: sin sesión, y también
   sin API. Discreto a propósito — entrar con Google es la acción principal de
   esta barra; esto es el atajo de quien ya sabe lo que busca. */
.cuenta-perfil {
  padding: 5px 11px;
  border: 1px solid #d9c47740; border-radius: 7px;
  background: #17211a; color: #cbd4bf;
  font: 700 11px/1.3 Inter, system-ui, sans-serif; cursor: pointer;
}
.cuenta-perfil:hover { border-color: var(--oro); color: var(--tinta); }