/* Perfil propio — solo lo que no cabe en components.css sin engordarlo
   para todo el mundo (norma de CLAUDE.md). Hoy: la pestaña «Mis
   torneos» (tanda 236). */

.mis-torneos-grupo {
  margin: 16px 0 8px;
  font-size: var(--t-md);
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mis-torneos-grupo:first-child { margin-top: 0; }

.mis-torneos-fila {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}
.mis-torneos-fila:hover { border-color: var(--border-strong); }
.mis-torneos-nombre { flex: 1; font-weight: 600; }

.mis-torneos-puesto { font-size: var(--t-sm); font-weight: 600; }
.mis-torneos-puesto.oro { color: var(--warning); }
.mis-torneos-puesto.vivo { color: var(--success); }

/* ── El palmarés de torneos en la ficha de alguien (tanda 262) ──
   Vivían en css/torneos.css, que /usuario NO carga: la chapa salía sin
   estilo ninguno y pegada al número. */
.torneo-chapa-palmares {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--ice);
  color: var(--navy);
  font-size: var(--t-2xs);
  font-weight: 800;
}

.torneo-palmares-oro {
  border-color: rgba(217, 164, 6, 0.5);
  background: rgba(217, 164, 6, 0.14);
  color: #8a6a04;
}

:root[data-theme='dark'] .torneo-palmares-oro {
  color: #e8c05a;
}

/* ── La vitrina de medallas de torneo (tanda 262) ──
   Una fila de iconos con el color de su rareza. Centrada como el resto
   de la cabecera y con `flex-wrap`, que con diez medallas y un móvil
   estrecho la fila tiene que poder partirse. */
/* La fila del palmarés va DEBAJO del bloque de avatar y nombre, a todo
   el ancho de la tarjeta: dentro de la columna del nombre no cabe (en
   móvil son unos 200 px) y dentro de .profile-hero-body aplastaba esa
   columna en escritorio, donde ese contenedor no hace wrap.
   El padding repite el del body para que las medallas queden alineadas
   con el avatar. */
.palmares-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 0 24px 16px;
}

@media (max-width: 420px) {
  .palmares-fila {
    padding: 0 16px 16px;
  }
}

.palmares-vitrina {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Al lado de las medallas y sin margen de párrafo: es un pie de foto,
   no un párrafo suelto. */
.palmares-fila .torneo-palmares {
  margin: 0;
}

.palmares-medalla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  /* `cursor: help` porque el título de la medalla y lo que hay que hacer
     para ganarla van en el `title`: sin la pista, nadie descubre que se
     puede pasar el ratón por encima. */
  cursor: help;
}

/* Los colores de rareza son los mismos que usa la rejilla de trofeos
   (rarity-bronze / silver / gold en components.css): aquí solo se
   ajusta el borde, para que el oro se distinga del bronce de un vistazo
   y sin tener que leer nada. */
.palmares-medalla.rarity-silver {
  border-color: var(--border-strong);
}

.palmares-medalla.rarity-gold {
  border-color: rgba(217, 164, 6, 0.55);
  background: rgba(217, 164, 6, 0.1);
}



/* ═══════════════════════════════════════════════════════════════════
   LA FICHA DE UNA PERSONA (tanda 306)

   Todo lo de aquí abajo vivía en components.css —que baja TODO el
   mundo— y solo lo usan dos pantallas: /perfil (la tuya) y /usuario
   (la de otro). Las dos cargan esta hoja, así que aquí es donde toca.
   Son ~300 líneas que ya no viajan con la portada.
   ═══════════════════════════════════════════════════════════════════ */

.profile-bio {
  font-size: var(--t-sm);
  color: var(--text-mid);
  margin-top: 8px;
  max-width: 480px;
}

/* Va dentro de .perfil-chapas (tanda 306): la separación y el salto de
   línea los pone la fila, no la chapa. */
.profile-level {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}

.profile-level:hover {
  text-decoration: underline;
}

.profile-xp-bar {
  width: 100%;
  max-width: 280px;
}

/* ── Profile hero (perfil.html propio) ── */
.profile-hero {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 24px;
  background: var(--white);
}

.profile-hero-banner {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Un banner sin foto es un rectángulo de color liso: 160 px de alto son
   160 px de nada, y dejaban la cabecera medio vacía con todo lo demás
   empezando muy abajo (tanda 263). Con foto se quedan los 160.
   Va JUSTO DESPUÉS de la regla de arriba a propósito: tienen la misma
   especificidad, así que la que gana es la última que se lee. */
.profile-hero-banner-vacio {
  height: 96px;
}

/* Sin `position`: este botón sale en dos sitios —encima del banner
   (posicionado, ver la regla de abajo) y dentro de .perfil-acciones,
   donde va en el flujo como un botón más. */
.profile-hero-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(13, 27, 42, 0.55);
  /* Blanco fijo y no `--white`: este botón va siempre sobre un fondo
     oscuro traslúcido, en cualquier tema. */
  color: var(--blanco-fijo);
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
  border: none;
  backdrop-filter: blur(2px);
}

.profile-hero-banner .profile-hero-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

.profile-hero-row-break {
  display: none;
}

.profile-hero-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 24px 24px;
  position: relative;
}

@media (max-width: 640px) {
  .profile-hero-body {
    flex-wrap: wrap;
  }

  /* Fuerza que el botón caiga en su propia línea en vez de robarle
     ancho a la columna de nombre/bio (que en móvil apenas tiene
     sitio junto al avatar de 96px). Un elemento con flex-basis:100%
     siempre inicia una línea nueva; el botón que va después se sitúa
     ahí sin tener que estirarse él mismo a lo ancho. */
  .profile-hero-row-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
}

.profile-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: -48px;
}

.profile-hero-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  /* Sin aro. Llevaba un borde de 4px que en modo oscuro se leía como un
     círculo raro alrededor de la foto, sobre todo desde que el color de
     fondo ya no se pinta debajo. La separación con el banner la da el
     propio recorte redondo. */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-3xl);
  font-weight: 800;
  color: var(--white);
  background-color: var(--navy);
}

.profile-hero-avatar-edit {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-sm);
  cursor: pointer;
  border: 2px solid var(--white);
}

.profile-hero-info {
  padding-top: 24px;
  flex: 1;
  min-width: 0;
}

/* h1 desde la tanda 313 (era h2): esta era la única pantalla del sitio
   sin ningún <h1>, y el título de una ficha de persona es la persona.
   El selector nombra a los dos porque el tamaño no depende de la
   etiqueta, y así una vuelta atrás no deja el nombre sin estilo. */
.profile-hero-info h1,
.profile-hero-info h2 {
  font-size: var(--t-xl);
  font-weight: 800;
  word-break: break-word;
}

/* ── Acordeón (Logros, Reseñas...) ── */
.accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
  background: var(--white);
}

.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px;
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.accordion-header .chevron {
  transition: transform 0.15s var(--ease);
  font-size: var(--t-sm);
}

.accordion.open .accordion-header .chevron {
  transform: rotate(180deg);
}

.accordion-body {
  display: none;
  padding: 0 16px 16px;
}

.accordion.open .accordion-body {
  display: block;
}

.profile-xp-bar .xp-label {
  font-size: var(--t-2xs);
  color: var(--text-dim);
  margin-top: 4px;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 600px) {
  .achievements-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.achievement-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.achievement-tile:not(.locked):hover {
  transform: translateY(-2px);
}

.achievement-tile.locked {
  filter: grayscale(1);
  opacity: 0.5;
}

.achievement-tile .icon {
  font-size: var(--t-2xl);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(13, 27, 42, 0.08);
}

.achievement-tile.locked .icon {
  background: var(--bg);
}

.achievement-tile .name {
  font-size: var(--t-2xs);
  font-weight: 700;
  line-height: 1.3;
}


/* ── La caja de acciones de la cabecera (tanda 306) ──
   Seguir / Mensaje (ficha de otro) y Editar perfil (la tuya) estaban
   SUELTOS debajo de la tarjeta, en un div con estilos en línea: una
   fila de botones flotando en medio de la página, sin nada que los
   atara a la persona de la que hablan. Ahora van dentro de la
   cabecera, a la derecha del nombre.

   El `margin-top` iguala el `padding-top` de .profile-hero-info para
   que los botones salgan a la altura del nombre y no del avatar, que
   sobresale 48 px hacia arriba. */
.perfil-acciones {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  margin-top: 24px;
  margin-left: auto;
}

@media (max-width: 640px) {
  /* Debajo, en su propia línea: junto al avatar de 96 px no le queda
     ancho a la columna del nombre. Quien la baja es
     .profile-hero-row-break. */
  .perfil-acciones {
    margin-top: 12px;
  }
}

/* ── Las chapas que van bajo el nombre (tanda 306) ──
   Nivel y rango de colaborador. El rango era una TARJETA más de la
   rejilla de estadísticas, y desentonaba: las otras cuatro eran
   números y esa un icono con un título. No es una cifra, es parte de
   quién es la persona — así que sube al lado del nivel. */
.perfil-chapas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 8px;
}

.perfil-rango {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--ice);
  color: var(--navy);
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
}

.perfil-rango:hover {
  border-color: var(--border-strong);
}

/* ── La tira de cifras (tanda 306) ──
   Antes esto eran DOS bloques separados: la barra de seguidores dentro
   de la tarjeta y, debajo y fuera, una rejilla de tres a cinco
   TARJETAS con borde, cada una con un número. Ocho cifras de la misma
   persona repartidas en dos sitios y nueve bordes por medio.

   Ahora es una sola tira al pie de la tarjeta. Sin bordes entre
   cifras: las separa el espacio, que es lo que las separa de verdad. */
.perfil-cifras {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}

/* El lote que pinta el JS no puede ser una caja propia: sus cifras
   tienen que repartirse en la MISMA fila que los contadores que ya
   vienen en el HTML. `display: contents` lo saca del árbol de cajas y
   deja a sus hijos como hijos directos de la tira. */
.perfil-cifras-lote {
  display: contents;
}

.perfil-cifra {
  /* 84 px de base y no 96: con las SIETE cifras de tu propio perfil y
     una tarjeta de 670 px, con 96 entraban seis y «Trofeos» se quedaba
     sola en una segunda fila, centrada. Con 84 caben las siete. */
  flex: 1 1 84px;
  /* Un hijo de flex tiene min-width:auto y se niega a encoger por
     debajo de su contenido: sin esto, con siete cifras, la última se
     salía por la derecha en un móvil de 360 px. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  background: none;
  border: none;
  color: inherit;
  text-align: center;
}

.perfil-cifra .valor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.perfil-cifra .rotulo {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

button.perfil-cifra {
  cursor: pointer;
}

button.perfil-cifra:hover .rotulo {
  color: var(--navy);
}


/* ═══════════════════════════════════════════════════════════════════
   LA ACTIVIDAD DEL FORO EN LA FICHA DE UNA PERSONA (tanda 307)

   Esto vivía en foro.css desde la tanda 299 y lo pinta SOLO
   js/foro-actividad.js, que importan js/perfil.js y js/usuario.js — dos
   páginas que NO cargan foro.css. O sea que la pestaña «Foro» de los
   dos perfiles llevaba desde entonces sin una sola regla: los números
   pegados a su rótulo («58Mensajes») y las listas en crudo. Lo vio
   PINGU en una captura, no la prueba.

   Por qué no lo vio la prueba: el barrido de la tanda 299 sigue el JS
   de cada página y lo que ese JS importa, pero buscaba `from '…'` — y
   foro-actividad.js entra por un `import()` DINÁMICO, para no cargarlo
   hasta que alguien abre la pestaña. Desde la 307 el barrido sigue las
   dos formas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Actividad del foro en el perfil ── */
.foro-act-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.foro-act-titular {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--t-md);
  font-weight: 800;
}

.foro-act-titular span {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--ice);
  color: var(--navy);
  font-size: var(--t-xs);
}

.foro-act-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foro-act-fila {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.foro-act-fila:first-child {
  border-top: none;
}

.foro-act-icono {
  color: var(--text-dim);
  flex-shrink: 0;
  margin-top: 2px;
}

.foro-act-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.foro-act-titulo {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text);
}

.foro-act-titulo:hover {
  color: var(--navy);
}

.foro-act-trozo {
  font-size: var(--t-sm);
  color: var(--text-mid);
  line-height: 1.5;
}

.foro-act-cuerpo small {
  font-size: var(--t-xs);
  color: var(--text-dim);
}

/* ── Los números de la actividad del foro en el perfil ── */
.foro-act-numeros {
  display: flex;
  flex-wrap: wrap;
  /* El hueco es lo que las separa ahora que no hay borde: más ancho que
     los 10 px de antes, o se leerían como una sola cifra larga. */
  gap: 12px 32px;
  margin-bottom: 16px;
}

/* Sin borde y con la misma tipografía que la tira de cifras de la
   cabecera (tanda 307): son lo mismo —un número y lo que cuenta— y
   estaban a una pestaña de distancia contándose de dos maneras, una en
   tira limpia y la otra en tres cajitas con borde. */
.foro-act-numeros > div {
  display: grid;
  gap: 4px;
  text-align: center;
}

.foro-act-numeros strong {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.foro-act-numeros span {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.foro-act-recorte {
  margin: 8px 0 0;
}

/* Los botones de la ficha de una persona, para un dedo (tanda 312). */
@media (pointer: coarse) {
  .profile-hero-edit-btn,
  .profile-level,
  .perfil-rango {
    min-height: 44px;
  }
  .profile-hero-avatar-edit {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}