/* perfil.css — la ficha del jugador y las insignias.

   Dos cosas viven acá: el diálogo del perfil, que se abre desde el vestíbulo, y
   las insignias, que NO son del perfil —aparecen pegadas a un nombre en la
   barra de cuenta y en la tabla de posiciones—, pero se definen una sola vez
   porque una medalla que cambia de forma según dónde se la mire deja de ser un
   símbolo reconocible.

   La paleta es la del juego: oro sobre noche. Cada medalla trae su color en
   `--insignia-color` desde `medallas.json`, así que agregar una medalla nueva
   no toca una línea de CSS. */

/* ── insignias ─────────────────────────────────────────────────────────── */

.nombre-con-medallas { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.nombre-con-medallas .nombre-propio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.insignia {
  display: inline-grid; place-items: center; flex: none;
  width: 1.55em; height: 1.55em;
  border: 1px solid color-mix(in srgb, var(--insignia-color, #e8c96a), transparent 45%);
  border-radius: 5px;
  background: color-mix(in srgb, var(--insignia-color, #e8c96a), #050805 84%);
  color: var(--insignia-color, #e8c96a);
  font: 800 .82em/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 0 9px color-mix(in srgb, var(--insignia-color, #e8c96a), transparent 55%);
  cursor: help;
}
.insignia-mas { font-family: Inter, system-ui, sans-serif; font-size: .68em; color: #9fae95; border-color: #d9c47733; background: #131c14; text-shadow: none; }
.insignia-grande { width: 2.4em; height: 2.4em; border-radius: 8px; font-size: 1.15em; }
/* La medalla que un logro promete: no se la lleva todavía, se la muestra. */
.insignia-premio { margin-top: 6px; opacity: .85; }

/* ── el diálogo ────────────────────────────────────────────────────────── */

#perfil {
  width: min(940px, 96vw); max-height: min(870px, 92vh); padding: 0;
  border: 1px solid var(--linea); border-radius: 18px;
  background: radial-gradient(circle at 88% 0, #e8c96a12, transparent 38%), linear-gradient(150deg, #16211a, #0a0f0b 76%);
  color: var(--tinta);
  box-shadow: 0 30px 90px #000b;
}
#perfil::backdrop { background: #04070499; backdrop-filter: blur(3px); }
#perfil > form { display: flex; flex-direction: column; max-height: inherit; min-height: 0; }
#perfil > form > .dialogo-cabecera { flex: none; }

.perfil-cabecera {
  display: flex; align-items: center; flex-wrap: wrap; flex: none; gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(112deg, #1d2c1f, #0e150f 74%);
}
.perfil-avatar {
  display: grid; place-items: center; overflow: hidden; flex: none;
  width: 62px; height: 62px;
  border: 2px solid var(--aro, #d9c47766); border-radius: 50%;
  background: #1b2a19; color: var(--oro);
  font: 800 22px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aro, #e8c96a), transparent 88%);
}
.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; }

.perfil-identidad { flex: 1 1 260px; min-width: 0; }
.perfil-nombre { margin: 0; overflow: hidden; color: var(--tinta); font: 800 22px/1.2 Inter, system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.perfil-titulo { margin: 5px 0 0; color: var(--oro); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }

/* La banda de medallas, debajo del nombre y no al costado: así puede llenarse
   con los años sin empujar nada. Se envuelve sola en varias filas. */
.perfil-medallera { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; font-size: 15px; }
button.insignia { padding: 0; cursor: pointer; }
button.insignia:hover { transform: translateY(-1px); border-color: var(--insignia-color, #e8c96a); }
button.insignia:focus-visible { outline: 2px solid var(--insignia-color, #e8c96a); outline-offset: 2px; }

/* El cartelito que explica una medalla cuando se la toca. Sale debajo de la
   banda, empujando la cabecera: en un teléfono no hay lugar para un globo. */
.perfil-medalla-detalle {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  margin-top: 9px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--insignia-color, #e8c96a), transparent 55%);
  border-radius: 11px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--insignia-color, #e8c96a), #0b110c 88%), #0b110ccc 76%);
  animation: medalla-entra .18s ease both;
}
.perfil-medalla-detalle[hidden] { display: none; }
.perfil-medalla-detalle strong { display: block; color: var(--tinta); font-size: 14px; }
.perfil-medalla-detalle p { margin: 3px 0 4px; color: #b6c4ab; font-size: 12px; line-height: 1.45; }
.perfil-medalla-detalle small { color: var(--insignia-color, #e8c96a); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
@keyframes medalla-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.perfil-cifras { display: flex; gap: 10px; flex: none; }
.perfil-cifra {
  display: grid; gap: 2px; justify-items: center;
  min-width: 82px; padding: 9px 12px;
  border: 1px solid var(--linea); border-radius: 11px;
  background: #0c130d99;
}
.perfil-cifra strong { color: var(--oro); font-size: 18px; }
.perfil-cifra span { color: #9fae95; font-size: 10.5px; text-align: center; }

/* La barra de solapas. Tres cosas que parecen detalles y no lo son:

   `flex: none` — la ficha es una columna flexible, y sin esto la barra se
   encogía cuando el cuerpo traía mucho contenido o la ventana era baja: los
   botones quedaban recortados contra el borde, medio tapados por lo de abajo.
   Es EL motivo por el que a veces no se veían.

   `flex-wrap` — si no entran a lo ancho pasan a una segunda fila en vez de
   irse fuera de la pantalla. Un botón que hay que ir a buscar con scroll
   horizontal es un botón que no existe.

   Y el aspecto: antes eran texto suelto sobre el fondo y sólo la activa tenía
   forma de solapa. Ahora las cuatro se ven como botones —caja propia, borde,
   fondo— y la activa se distingue por el oro y por la barrita de abajo. */
.perfil-solapas {
  display: flex; flex: none; flex-wrap: wrap; gap: 6px;
  padding: 12px 24px 0; border-bottom: 1px solid var(--linea);
  background: #0c130db3;
}
.perfil-solapa {
  position: relative;
  padding: 9px 17px 10px;
  border: 1px solid #d9c47733; border-bottom: none; border-radius: 9px 9px 0 0;
  background: #121b13; color: #b9c7ae;
  font: 700 13.5px/1 Inter, system-ui, sans-serif; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.perfil-solapa:hover { border-color: #d9c47766; color: var(--tinta); background: #1a2519; }
.perfil-solapa:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.perfil-solapa.activa { border-color: var(--linea); background: #16211a; color: var(--oro); }
/* La franja que tapa la línea divisoria: es lo que hace que la solapa activa
   parezca continuar en el cuerpo, sin moverla un píxel de su lugar. */
.perfil-solapa.activa::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px;
  background: var(--oro);
}

.perfil-cuerpo { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 18px 24px 26px; }
.perfil-titulo-seccion { margin: 22px 0 12px; color: var(--oro); font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.perfil-titulo-seccion:first-child { margin-top: 4px; }
.perfil-vacio { margin: 0; padding: 14px 16px; border: 1px dashed #d9c47733; border-radius: 10px; color: #9fae95; font-size: 13px; line-height: 1.5; }
.perfil-nota { margin: 0 0 14px; color: #8e9c85; font-size: 12px; line-height: 1.5; }

/* ── resumen ───────────────────────────────────────────────────────────── */

.perfil-tarjetas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.perfil-tarjeta {
  display: grid; gap: 3px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: 12px;
  background: linear-gradient(160deg, #16211a, #0c120d 80%);
}
.perfil-tarjeta-rotulo { color: #9fae95; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.perfil-tarjeta strong { color: var(--tinta); font-size: 24px; line-height: 1.1; }
.perfil-tarjeta small { color: #8e9c85; font-size: 11px; }

.perfil-barra { overflow: hidden; height: 6px; margin-top: 7px; border-radius: 99px; background: #0a0f0b; box-shadow: inset 0 0 0 1px #d9c47726; }
.perfil-barra-relleno { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #728c4a, var(--oro)); transition: width .4s ease; }

.perfil-maestrias { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.perfil-maestrias li { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.perfil-maestrias strong { color: var(--tinta); font-size: 13.5px; }
.perfil-maestria-cifra { color: var(--oro); font-size: 12px; font-weight: 700; text-align: right; }
.perfil-maestrias .perfil-barra { grid-column: 1 / -1; margin-top: 2px; }

.perfil-historial { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.perfil-partida {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--linea); border-left-width: 3px; border-radius: 9px;
  background: #0c130d88;
}
.perfil-partida.ganada { border-left-color: #7fbf5a; }
.perfil-partida.perdida { border-left-color: #b8564e; }
.perfil-partida-marca { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1b2a19; color: #9fae95; font: 800 11px/1 Inter, system-ui, sans-serif; }
.perfil-partida.ganada .perfil-partida-marca { background: #23381d; color: #a9dd86; }
.perfil-partida.perdida .perfil-partida-marca { background: #3a1f1d; color: #e79c95; }
.perfil-partida-rival { color: var(--tinta); font-size: 13px; }
.perfil-partida small { color: #8e9c85; font-size: 11px; text-align: right; }

/* ── medallas ──────────────────────────────────────────────────────────── */

.perfil-medallas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.perfil-medalla {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 13px 14px;
  border: 1px solid var(--linea); border-radius: 12px;
  background: #0c120d88;
  opacity: .5;
}
.perfil-medalla.tenida {
  border-color: color-mix(in srgb, var(--insignia-color), transparent 55%);
  background: linear-gradient(150deg, color-mix(in srgb, var(--insignia-color), #0b110c 90%), #0b110c 78%);
  opacity: 1;
}
.perfil-medalla:not(.tenida) .insignia { filter: grayscale(1); }
.perfil-medalla h3 { margin: 0 0 3px; color: var(--tinta); font-size: 14px; }
.perfil-medalla p { margin: 0 0 5px; color: #9fae95; font-size: 12px; line-height: 1.45; }
.perfil-medalla small { color: #7d8a75; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.perfil-medalla.tenida small { color: var(--insignia-color); }

/* ── logros ────────────────────────────────────────────────────────────── */

.perfil-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.perfil-filtro {
  padding: 6px 11px;
  border: 1px solid var(--linea); border-radius: 99px;
  background: #0e150f; color: #9fae95;
  font: 700 11.5px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.perfil-filtro small { color: #6f7c68; font-size: 10px; font-weight: 700; }
.perfil-filtro:hover { border-color: #d9c47788; color: var(--tinta); }
.perfil-filtro.activo { border-color: var(--oro); background: #22301c; color: var(--oro); }
.perfil-filtro.activo small { color: #a4b494; }

/* «Conseguidos» y «Lo que falta». La cuenta al lado, en gris, para saber de un
   vistazo cuánto hay de cada lado sin contar tarjetas. */
.perfil-grupo-logros {
  display: flex; align-items: baseline; gap: 7px;
  margin: 18px 0 10px;
  color: var(--tinta); font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.perfil-grupo-logros::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--oro); }
.perfil-grupo-logros span { color: #7d8a75; font-size: 11px; font-weight: 700; }
.perfil-grupo-logros:first-of-type { margin-top: 4px; }

.perfil-logros { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.perfil-logro {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: start;
  padding: 12px 13px;
  border: 1px solid var(--linea); border-radius: 12px;
  background: #0c120d88;
}
.perfil-logro.hecho { border-color: #7fbf5a55; background: linear-gradient(150deg, #16281099, #0b110c 76%); }
.perfil-logro.escondido { opacity: .62; border-style: dashed; }
.perfil-logro-arte {
  position: relative; display: block; overflow: hidden; flex: none;
  width: 42px; height: 42px; border: 1px solid #d9c47755; border-radius: 9px;
  background-color: #102014;
  background-image: url('arte/naipe-cimarron/logros/coleccion-logros.webp');
  background-repeat: no-repeat; background-size: 300% 300%;
  background-position: var(--arte-x) var(--arte-y);
  box-shadow: inset 0 0 0 1px #05080566, 0 2px 7px #0008;
  image-rendering: pixelated;
}
.perfil-logro-arte::after {
  content: attr(data-estado); position: absolute; right: 2px; bottom: 1px;
  display: grid; place-items: center; width: 15px; height: 15px;
  border: 1px solid #b7e39a99; border-radius: 50%;
  background: #183018; color: #d8f2c8; font: 900 10px/1 Inter,system-ui,sans-serif;
}
.perfil-logro-arte:not([data-estado])::after { display:none; }
.perfil-logro-arte.conseguido { border-color:#8acb69aa; }
.perfil-logro-arte.escondido { filter: grayscale(1) brightness(.38); }
.perfil-logro-texto { min-width: 0; }
.perfil-logro-texto h3 { margin: 0 0 3px; color: var(--tinta); font-size: 13.5px; }
.perfil-logro.hecho .perfil-logro-texto h3 { color: #cfe4bb; }
.perfil-logro-texto p { margin: 0; color: #9fae95; font-size: 11.5px; line-height: 1.45; }
.perfil-logro-texto small { display: block; margin-top: 4px; color: #7d8a75; font-size: 10.5px; }
.perfil-logro-puntos {
  flex: none; padding: 3px 8px;
  border: 1px solid #d9c47733; border-radius: 99px;
  background: #131c14; color: var(--oro);
  font: 800 11px/1.5 Inter, system-ui, sans-serif;
}

/* ── el aviso de logro nuevo ───────────────────────────────────────────── */

/* Es un `popover`, así que hay que apagarle el marco, el fondo y el `inset:0`
   que el navegador le pone por omisión, y volver a colocarlo en su esquina. */
.avisos-logro, .avisos-logro:popover-open {
  position: fixed; z-index: 60; inset: auto 18px 18px auto;
  display: grid; gap: 8px; width: min(330px, calc(100vw - 36px));
  margin: 0; padding: 0; border: 0; overflow: visible;
  background: none; color: inherit;
  pointer-events: none;
}
/* Un popover cerrado no se dibuja; sin esto, el `display:grid` de arriba lo
   dejaría visible antes del primer logro. */
.avisos-logro:not(:popover-open):not(.sin-popover) { display: none; }
.aviso-logro {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center;
  padding: 12px 14px;
  border: 1px solid #7fbf5a66; border-radius: 12px;
  background: linear-gradient(150deg, #1d3216, #0b110ce8 78%);
  box-shadow: 0 16px 40px #000a;
  pointer-events: auto; cursor: pointer;
  animation: aviso-entra .38s cubic-bezier(.2, .9, .3, 1.2) both;
}
.aviso-logro.aviso-medalla {
  border-color: color-mix(in srgb, var(--insignia-color), transparent 50%);
  background: linear-gradient(150deg, color-mix(in srgb, var(--insignia-color), #0b110c 82%), #0b110ce8 78%);
}
.aviso-logro.yendose { animation: aviso-sale .4s ease forwards; }
.aviso-logro-marca {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border: 1px solid #7fbf5a80; border-radius: 9px;
  background: #23381d; color: #a9dd86;
  font: 800 16px/1 Georgia, serif;
}
.aviso-medalla .aviso-logro-marca {
  border-color: color-mix(in srgb, var(--insignia-color), transparent 45%);
  background: color-mix(in srgb, var(--insignia-color), #050805 84%);
  color: var(--insignia-color);
}
.aviso-logro small { display: block; color: #9fae95; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.aviso-medalla small { color: var(--insignia-color); }
.aviso-logro strong { display: block; margin: 1px 0 2px; color: var(--tinta); font-size: 14px; }
.aviso-logro p { margin: 0; color: #9fae95; font-size: 11.5px; line-height: 1.4; }

@keyframes aviso-entra { from { opacity: 0; transform: translateX(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { to { opacity: 0; transform: translateX(26px) scale(.97); } }

@media (prefers-reduced-motion: reduce) {
  .aviso-logro, .aviso-logro.yendose, .perfil-medalla-detalle { animation: none; }
  .perfil-barra-relleno { transition: none; }
  button.insignia:hover { transform: none; }
}

/* ── los temas VIP ─────────────────────────────────────────────────────── */

/* Cuando un código VIP pinta el vestíbulo, el perfil se pinta con él. No hay un
   selector por tema: los tres —y los que vengan— dejan las mismas variables
   `--vip-*` en el `body`, así que alcanza con leerlas. Un tema nuevo no toca
   este archivo. */

body[class*="tema-vip-"] #perfil {
  border-color: var(--vip-linea);
  background: radial-gradient(circle at 88% 0, color-mix(in srgb, var(--vip-acento), transparent 84%), transparent 36%),
              linear-gradient(150deg, var(--vip-panel), var(--vip-fondo) 74%);
}
body[class*="tema-vip-"] #perfil .perfil-cabecera {
  border-bottom-color: var(--vip-linea);
  background: linear-gradient(112deg, var(--vip-cabecera), var(--vip-fondo) 74%);
}
body[class*="tema-vip-"] #perfil .perfil-solapas { border-bottom-color: var(--vip-linea); }
body[class*="tema-vip-"] #perfil .perfil-solapas { background: color-mix(in srgb, var(--vip-fondo), transparent 30%); }
body[class*="tema-vip-"] #perfil .perfil-solapa { border-color: var(--vip-linea); background: color-mix(in srgb, var(--vip-panel), var(--vip-fondo) 55%); }
body[class*="tema-vip-"] #perfil .perfil-solapa.activa { border-color: var(--vip-linea); background: var(--vip-panel); color: var(--vip-acento); }
body[class*="tema-vip-"] #perfil .perfil-solapa.activa::after { background: var(--vip-acento); }
body[class*="tema-vip-"] #perfil .perfil-titulo,
body[class*="tema-vip-"] #perfil .perfil-titulo-seccion,
body[class*="tema-vip-"] #perfil .perfil-cifra strong,
body[class*="tema-vip-"] #perfil .perfil-maestria-cifra,
body[class*="tema-vip-"] #perfil .perfil-logro-puntos { color: var(--vip-acento); }
body[class*="tema-vip-"] #perfil .perfil-cifra,
body[class*="tema-vip-"] #perfil .perfil-tarjeta,
body[class*="tema-vip-"] #perfil .perfil-logro,
body[class*="tema-vip-"] #perfil .perfil-medalla,
body[class*="tema-vip-"] #perfil .perfil-partida { border-color: var(--vip-linea); background: color-mix(in srgb, var(--vip-panel), transparent 42%); }
body[class*="tema-vip-"] #perfil .perfil-tarjeta { background: linear-gradient(160deg, var(--vip-panel), var(--vip-fondo) 80%); }
body[class*="tema-vip-"] #perfil .perfil-filtro.activo { border-color: var(--vip-acento); background: color-mix(in srgb, var(--vip-acento), var(--vip-fondo) 78%); color: var(--vip-acento); }
body[class*="tema-vip-"] #perfil .perfil-barra-relleno { background: linear-gradient(90deg, color-mix(in srgb, var(--vip-acento), #000 45%), var(--vip-acento)); }
body[class*="tema-vip-"] #perfil .perfil-grupo-logros::before { background: var(--vip-acento); }
/* Una medalla conserva SU color aunque el tema mande: el color es parte de la
   medalla, y una Alfa Tester rosa en un tema rosa dejaría de distinguirse. */
body[class*="tema-vip-"] #perfil .perfil-medalla.tenida {
  border-color: color-mix(in srgb, var(--insignia-color), transparent 55%);
  background: linear-gradient(150deg, color-mix(in srgb, var(--insignia-color), var(--vip-fondo) 88%), var(--vip-fondo) 78%);
}

@media (max-width: 640px) {
  #perfil { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .perfil-cabecera { padding: 14px 16px 12px; }
  .perfil-cifras { width: 100%; }
  .perfil-cifra { flex: 1; min-width: 0; }
  .perfil-solapas { padding: 10px 12px 0; }
  .perfil-solapa { padding: 9px 13px 10px; font-size: 12.5px; }
  .perfil-cuerpo { padding: 14px 16px 22px; }
  .perfil-logros, .perfil-medallas { grid-template-columns: 1fr; }
  .perfil-medallera { font-size: 14px; }
}