/* ══════════════════════════════════════════════════════════════════════════════
   perfil.css — PÁGINA · Perfil (perfil.html) · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Arquitectura §2.7 + dev B-004: identidad (alias, user id, país) · cuatro
   cifras · mis entregas con estado · comentarios recibidos · pasaporte de
   insignias · notificaciones. Y el ONBOARDING (B-003): alias y país en el
   primer login.

   3/oct, con las referencias (Duolingo, komoot, Uxcel; W4): la cabecera de
   identidad es una placa con el avatar de alias grande y una fila de cifras;
   debajo, dos columnas de placas: entregas y comentarios (blancas con borde) a
   la izquierda; pasaporte y notificaciones (gris claras) a la derecha.
   ══════════════════════════════════════════════════════════════════════════════ */

.perfil__estado { display: none; }
[data-state="perfil"] .perfil__estado--perfil,
[data-state="onboarding"] .perfil__estado--onboarding,
[data-state="visitante"] .perfil__estado--visitante,
[data-state="bloqueado"] .perfil__estado--bloqueado { display: block; }

/* ── Identidad (placa) ────────────────────────────────────────────────────── */
.identidad {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--espacio-32);
  align-items: center;
  margin-bottom: var(--espacio-32);
  padding: var(--espacio-32);
}
.avatar--xl { grid-template-columns: repeat(5, var(--espacio-16)); grid-auto-rows: var(--espacio-16); }
.identidad__datos .ficha__kicker { margin-bottom: var(--espacio-12); }
.identidad__alias {
  margin: 0 0 var(--espacio-12);
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.identidad__meta { margin: 0; font-size: var(--tipo-meta); line-height: 1.5; color: var(--texto-terciario); }
/* Cerrar sesión: botón secundario (borde, píldora), arriba a la derecha de la placa (5/oct). */
.identidad__salir {
  position: absolute;
  top: var(--espacio-24);
  right: var(--espacio-24);
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--espacio-16);
  border: var(--trazo-filete) solid var(--borde-fuerte);
  border-radius: var(--radio-pildora);
  background: var(--superficie-pagina);
  font-weight: 600;
  font-size: var(--tipo-meta);
  color: var(--texto-principal);
  text-decoration: none;
  transition: background .12s ease;
}
.identidad__salir:hover { background: var(--superficie-clara); }
.identidad__salir:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 2px; }
.identidad__meta b { font-weight: 600; color: var(--texto-principal); }
.identidad__cifras { display: flex; flex-wrap: wrap; gap: var(--espacio-16) var(--espacio-32); }

/* ── Dos columnas de placas ───────────────────────────────────────────────── */
.perfil__cuerpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); gap: var(--espacio-32); align-items: start; }
.perfil__principal, .perfil__lado { min-width: 0; }
.perfil__principal, .perfil__lado { display: grid; gap: var(--espacio-32); }
.perfil__seccion { padding: var(--espacio-32); }
.perfil__seccion .ficha__h2 { margin-bottom: var(--espacio-8); }
.perfil__ayuda { margin: 0 0 var(--espacio-16); font-size: var(--tipo-meta); line-height: 1.5; color: var(--texto-terciario); }

/* Pasaporte: cinco filas, una por reto. Obtenida = arte; pendiente = hueco. */
.pasaporte { list-style: none; margin: 0; padding: 0; }
.ranura {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--espacio-12);
  align-items: center;
  padding: var(--espacio-12) 0;
  border-top: var(--trazo-filete) solid var(--borde-filete);
}
.ranura__arte { width: 40px; height: 40px; image-rendering: pixelated; }
.ranura__hueco {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--trazo-filete) dashed var(--borde-filete);
  border-radius: 50%;
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  color: var(--texto-terciario);
}
.ranura__texto { display: grid; gap: 2px; min-width: 0; }
.ranura__nombre { font-weight: 600; font-size: var(--tipo-cuerpo-menor); line-height: 1.3; }
.ranura--pendiente .ranura__nombre { font-weight: 500; color: var(--texto-secundario); }
.ranura__reto { font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.ranura__rango {
  padding: var(--espacio-4) var(--espacio-8);
  background: var(--acento-base);
  font-weight: 600;
  font-size: var(--tipo-meta-menor);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mis entregas: filas con etiqueta de estado y mensaje. */
.entregas { list-style: none; margin: var(--espacio-16) 0 0; padding: 0; }
.entrega-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espacio-8) var(--espacio-24);
  padding: var(--espacio-16) 0;
  border-top: var(--trazo-filete) solid var(--borde-filete);
}
.entrega-fila > * { min-width: 0; }
.entrega-fila__titulo, .entrega-fila__mensaje { overflow-wrap: anywhere; }
.entrega-fila__reto { font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.entrega-fila__titulo { margin: 2px 0 0; font-weight: 600; font-size: var(--tipo-cuerpo-menor); line-height: 1.35; }
.entrega-fila .etiqueta { align-self: start; }
.entrega-fila__mensaje { grid-column: 1 / -1; margin: 0; font-size: var(--tipo-meta); line-height: 1.5; color: var(--texto-secundario); }
.entrega-fila__puntos { grid-column: 1 / -1; font-size: var(--tipo-meta); color: var(--texto-terciario); }
.entrega-fila__accion { grid-column: 1 / -1; justify-self: start; margin: var(--espacio-8) var(--espacio-8) var(--espacio-8) 0; }

/* Comentarios recibidos: el mismo Comentario del hilo (css/galeria-pagina.css). */
.recibidos { list-style: none; margin: var(--espacio-16) 0 0; padding: 0; }
.recibidos .comentario { border-bottom: 0; border-top: var(--trazo-filete) solid var(--borde-filete); }
.recibidos .ficha__enlace { display: inline-block; margin-top: var(--espacio-8); font-size: var(--tipo-meta); }

/* Notificaciones (placa gris clara): filas blancas con el punto de no leída. */
.notis { padding: var(--espacio-32); }
.notis__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--espacio-8) var(--espacio-16); margin-bottom: var(--espacio-16); }
.notis__cabeza .ficha__h2 { margin: 0; }
.notis__marcar { padding: 0; border: 0; background: none; font: inherit; font-size: var(--tipo-meta-menor); color: var(--texto-terciario); text-decoration: underline; cursor: pointer; }
.notis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-8); }
.noti {
  display: grid;
  grid-template-columns: var(--espacio-8) minmax(0, 1fr);
  gap: var(--espacio-12);
  align-items: start;
  padding: var(--espacio-12) var(--espacio-16);
  background: var(--superficie-pagina);
  border: var(--trazo-filete) solid var(--borde-filete);
  cursor: pointer;
}
.noti::before { content: ''; width: var(--espacio-8); height: var(--espacio-8); margin-top: 6px; border-radius: 50%; background: var(--acento-base); }
.noti[data-leida]::before { background: var(--borde-filete); }
.noti[data-leida] { color: var(--texto-secundario); border-color: transparent; }
.noti:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 2px; }
.noti__texto { margin: 0; font-size: var(--tipo-meta); line-height: 1.5; }
.noti__fecha { display: block; margin-top: 2px; font-size: var(--tipo-meta-menor); color: var(--texto-terciario); }
.notis__vacio { margin: 0; font-size: var(--tipo-meta); color: var(--texto-terciario); }

/* ── Onboarding: alias y país en una placa; a la derecha, el avatar (4/oct) ── */
.onboarding__fila { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: var(--espacio-32); align-items: stretch; }
.onboarding { padding: var(--espacio-32); }
.onboarding__avatar { display: grid; justify-items: center; align-content: center; gap: var(--espacio-48); }
.onboarding__avatar .cta { border: 0; cursor: pointer; }
.onboarding .campo { margin-bottom: var(--espacio-32); }
.onboarding__vista {
  display: flex;
  align-items: center;
  gap: var(--espacio-12);
  margin: 0 0 var(--espacio-32);
  padding: var(--espacio-16) var(--espacio-24);
  background: var(--superficie-clara);
  font-size: var(--tipo-meta);
  line-height: 1.5;
  color: var(--texto-secundario);
}
.onboarding__vista b { font-family: var(--tipografia-pixel); font-weight: 400; font-size: var(--tipo-dato); line-height: 1; color: var(--texto-acento-sobre-claro); }

@media (max-width: 900px) {
  .identidad { grid-template-columns: auto minmax(0, 1fr); }
  .identidad__cifras { grid-column: 1 / -1; }
  .onboarding__fila { grid-template-columns: minmax(0, 1fr); }
  .perfil__cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .identidad, .perfil__seccion, .notis, .onboarding { padding: var(--espacio-24) var(--espacio-16); }
  .identidad { padding-top: var(--espacio-48); }
  .identidad__salir { top: var(--espacio-16); right: var(--espacio-16); }
  .identidad__cifras { gap: var(--espacio-16) var(--espacio-24); }
  .entrega-fila { grid-template-columns: 1fr; }
  .entrega-fila .etiqueta { justify-self: start; }
}