/* ==========================================================================
   Crónica del gremio: el salón de la hermandad.
   Noche de piedra azulada, dorado de los títulos de la interfaz de WoW, colores de clase en las fichas
   de la pista y colores de calidad de objeto (épico, raro, poco común, legendario) en las hazañas.
   ========================================================================== */
:root {
  color-scheme: dark;
  --piedra: #14171f;        /* fondo */
  --piedra-2: #1b1f2a;      /* superficies */
  --piedra-3: #0b0d12;      /* hundido: marcos de íconos, retrato */
  --borde: #343a49;
  --texto: #ece6d8;
  --tenue: #9a9fae;
  --oro: #f0c45a;           /* títulos, niveles, acciones */
  --oro-viejo: #a8822e;     /* marcos */
  --sangre: #e45b4f;        /* muertes */
  --epico: #c27cff;         /* niveles */
  --raro: #4fa8ff;          /* élites, grupos */
  --poco: #4fd16a;          /* misiones */
  --legendario: #ff9b2e;    /* JcJ */
  --viaje: #b9c2d6;         /* zonas */

  /* colores de clase de WoW */
  --WARRIOR: #c69b6d; --PALADIN: #f48cba; --HUNTER: #aad372; --ROGUE: #fff468; --PRIEST: #f4f4f4;
  --SHAMAN: #3d8fe6; --MAGE: #3fc7eb; --WARLOCK: #8788ee; --DRUID: #ff7c0a;

  --titulo: "Marcellus", Georgia, serif;
  --serif: "Literata", Georgia, serif;
  --sans: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --ancho: 1360px;
}

* { box-sizing: border-box; }
html { background: var(--piedra); }
body {
  margin: 0; color: var(--texto); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1400px 560px at 50% -12%, #2a3048 0%, transparent 70%) no-repeat, var(--piedra);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 2px; }
main { max-width: var(--ancho); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 72px max(20px, env(safe-area-inset-left)); overflow-x: clip; }
main:focus, main:focus-visible { outline: none; }

.cabecera { max-width: var(--ancho); margin: 0 auto; padding: 18px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { font: 400 20px/1.2 var(--titulo); color: var(--oro); text-decoration: none; min-width: 0; overflow-wrap: anywhere; letter-spacing: .02em; }
.marca span { color: var(--oro); }
.idioma { background: none; border: 1px solid var(--oro-viejo); color: var(--oro); font: 600 12px var(--sans);
  padding: 4px 10px; border-radius: 4px; cursor: pointer; flex: none; }
.idioma:hover, .idioma:focus-visible { background: #f0c45a14; }
.pie { max-width: var(--ancho); margin: 0 auto; padding: 24px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left));
  color: var(--tenue); font-size: 13px; border-top: 1px solid var(--borde); }

h1, h2, h3 { font-family: var(--titulo); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
h2, h3 { color: var(--oro); }
.vacio { color: var(--tenue); font-style: italic; }
.error { color: var(--sangre); }

/* ---------- Portada: el salón y la pista de niveles ---------- */
.salon { text-align: center; padding: 34px 0 0; }
.emblema { display: block; width: 84px; height: 102px; margin: 0 auto 14px; }
.emblema path { fill: #2c3a6b; stroke: var(--oro); stroke-width: 3; }
.emblema .estrella { fill: var(--oro); stroke: none; }
.salon h1 { font-size: clamp(40px, 6vw, 78px); line-height: 1; color: var(--oro); text-shadow: 0 2px 0 #0009; overflow-wrap: anywhere; }
.salon .bajada { color: var(--tenue); margin: 14px auto 0; max-width: 60ch; font-size: 17px; }

/* La pista de niveles: una vara dorada del 1 al máximo; cada aventurero es una ficha redonda con
   el color de su clase, y su nombre cuelga debajo (en filas, para que no se pisen). */
.pista { position: relative; margin: 58px 28px 0; padding-top: 8px; --filas: 1; height: calc(70px + var(--filas) * 46px); text-align: left; }
.pista .eje { position: absolute; left: -14px; right: -14px; top: 15px; height: 8px; border-radius: 4px;
  background: linear-gradient(#7a5e26, #3c2d12); box-shadow: 0 2px 0 #0008, inset 0 1px 0 #c79a4a66; }
.pista .marca-nivel { position: absolute; top: -22px; transform: translateX(-50%); font: 400 14px var(--titulo); color: var(--oro); }
.pista .marca-nivel::before { content: ""; position: absolute; z-index: 1; box-sizing: border-box; width: 13px; height: 13px;
  left: 50%; top: 41px;   /* 41 = centro de la vara (15 + 8/2) menos la altura del número (-22) */
  transform: translate(-50%, -50%) rotate(45deg); background: var(--piedra); border: 2px solid var(--oro); }
/* Cada corredor mide 0 de ancho y centra lo suyo sobre su nivel. Solo la ficha y el nombre reciben
   clics: la caja y la línea vertical no, así nunca tapan a otro aventurero. */
.corredor { position: absolute; top: 7px; width: 0; display: flex; flex-direction: column; align-items: center; text-decoration: none;
  left: 0; transition: left 1.4s cubic-bezier(.2, .8, .2, 1); pointer-events: none;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.corredor .punto { position: relative; z-index: 3; flex: none; width: 24px; height: 24px; border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle at 50% 35%, var(--clase, var(--texto)), color-mix(in srgb, var(--clase, var(--texto)) 50%, #000));
  border: 2px solid var(--oro-viejo); box-shadow: 0 0 0 1px #000, 0 0 0 4px var(--piedra); }
.corredor .tallo { position: absolute; z-index: 1; top: 12px; left: 0; width: 1px; height: calc(24px + var(--fila, 0) * 46px);
  background: linear-gradient(var(--oro-viejo), #a8822e44); pointer-events: none; }
.corredor .quien { position: relative; z-index: 2; flex: none; pointer-events: auto;
  margin-top: calc(12px + var(--fila, 0) * 46px); white-space: nowrap; padding: 2px 7px 3px;
  background: var(--piedra-2); border: 1px solid var(--borde); border-radius: 4px;
  font: 400 15px/1.1 var(--titulo); color: var(--clase, var(--texto)); text-align: center;
  transform: translateX(var(--desplaza, 0px)); }
.corredor .quien small { display: block; font: 500 11px var(--sans); color: var(--tenue); margin-top: 1px; }
.corredor:hover .quien, .corredor:focus-visible .quien { border-color: var(--oro-viejo); }
.corredor:hover .punto { border-color: var(--oro); }
.corredor:focus-visible { outline: none; }
.corredor:focus-visible .quien { outline: 2px solid var(--oro); outline-offset: 2px; }
.corredor .abre { font-size: .8em; color: var(--oro); }
.corredor.grupo .quien { color: var(--oro); }
.integrantes { position: absolute; z-index: 5; max-height: 300px; overflow-y: auto; text-align: left;
  background: var(--piedra-3); border: 2px solid var(--borde); border-radius: 6px; box-shadow: inset 0 0 0 1px #000, 0 10px 28px #000a; }
.integrantes ul { list-style: none; margin: 0; padding: 4px 0; }
.integrantes a { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; text-decoration: none;
  color: var(--clase, var(--texto)); font: 650 14px var(--sans); }
.integrantes a:hover, .integrantes a:focus-visible { background: #ffffff0a; outline: none; }
.integrantes .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.integrantes .nivel { color: var(--oro); flex: none; font: 400 15px var(--titulo); }
@media (prefers-reduced-motion: reduce) { .corredor { transition: none; } }

/* ---------- Portada: hazañas y miembros ---------- */
.portada { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; padding-top: 36px; }
@media (max-width: 900px) { .portada { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.portada h2 { font-size: 27px; margin-bottom: 14px; }

.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 14px; }
.filtros button { font: 500 13px var(--sans); color: var(--tenue); background: none; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 4px; padding: 5px 12px; }
.filtros button:hover { color: var(--texto); }
.filtros button[aria-pressed="true"] { color: var(--oro); border-color: var(--oro-viejo); background: #f0c45a12; }

.suceso {
  --tono: var(--tenue);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icono texto cuando";
  gap: 14px; align-items: center; padding: 11px 14px; margin-bottom: 8px;
  background: linear-gradient(90deg, #ffffff0b, #ffffff03); border: 1px solid #ffffff10; border-left: 3px solid var(--tono); border-radius: 6px;
}
.suceso > div { grid-area: texto; min-width: 0; }
.suceso .icono { grid-area: icono; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--tono);
  border: 2px solid var(--oro-viejo); background: var(--piedra-3); box-shadow: inset 0 0 0 2px #000; }
.suceso .cuando { grid-area: cuando; color: var(--tenue); font-size: 13px; text-align: right; white-space: nowrap; }
.suceso .reloj { display: block; color: #ffffff44; }
.suceso .quien { font-weight: 650; text-decoration: none; color: var(--clase, var(--texto)); }
.suceso .quien:hover { text-decoration: underline; }
.suceso .que { margin: 1px 0 0; color: #d9d6cf; overflow-wrap: anywhere; }
.suceso.nivel { --tono: var(--epico); }
.suceso.mision_completa { --tono: var(--poco); }
.suceso.pvp_baja { --tono: var(--legendario); }
.suceso.muerte { --tono: var(--sangre); }
.suceso.grupo { --tono: var(--raro); }
.suceso.zona { --tono: var(--viaje); }

.lista-pj { list-style: none; margin: 0; padding: 0 6px 0 0; }
@media (min-width: 901px) { .lista-pj { max-height: 1100px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--borde) transparent; } }
.lista-pj li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline;
  padding: 10px 4px; border-bottom: 1px solid var(--borde); text-decoration: none; }
.lista-pj li a:hover { background: #ffffff06; }
.lista-pj .nombre { font-weight: 650; color: var(--clase, var(--texto)); overflow-wrap: anywhere; }
.lista-pj .nivel { font: 400 22px var(--titulo); color: var(--oro); grid-row: span 2; }
.lista-pj .detalle { color: var(--tenue); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- Página de personaje ---------- */
.volver { display: inline-block; margin: 22px 0 0; color: var(--tenue); text-decoration: none; font-size: 15px; }
.volver:hover { color: var(--oro); }
.heroe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 26px; align-items: center; padding: 26px 0 0; }
.retrato { grid-row: span 2; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  font: 400 48px var(--titulo); color: var(--piedra-3); border: 3px solid var(--oro-viejo); box-shadow: inset 0 0 0 3px #000, 0 0 0 1px #000;
  background: radial-gradient(circle at 50% 35%, var(--clase, var(--texto)), var(--piedra-3) 78%); }
.heroe h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1; color: var(--clase, var(--texto)); overflow-wrap: anywhere; align-self: end; }
.heroe .linaje { color: var(--tenue); margin: 0; font-size: 17px; align-self: start; overflow-wrap: anywhere; }
.cifras { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.cifras li { display: flex; flex-direction: column; padding: 9px 16px; min-width: 96px; border: 1px solid var(--borde); border-radius: 6px; background: #0b0d1288; }
.cifras b { font: 400 25px/1.1 var(--titulo); color: var(--texto); }
.cifras span { color: var(--tenue); font-size: 13px; }
.cifras .nivel b, .cifras .elites b { color: var(--oro); }
.cifras .muertes b { color: var(--sangre); }
@media (max-width: 560px) { .retrato { width: 72px; height: 72px; font-size: 34px; } .heroe { gap: 2px 16px; } }

.cuerpo-pj { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 64px; padding-top: 34px; }
@media (max-width: 900px) { .cuerpo-pj { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.cuerpo-pj > *, .portada > * { min-width: 0; }

.pestanas { display: flex; gap: 26px; border-bottom: 1px solid var(--borde); margin-bottom: 30px; }
.pestanas button { background: none; border: 0; color: var(--tenue); font: 400 19px var(--titulo); cursor: pointer;
  padding: 0 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected="true"] { color: var(--oro); border-bottom-color: var(--oro); }

.capitulo { max-width: 66ch; margin-bottom: 60px; }
.capitulo .numero { color: var(--oro); font: 400 15px var(--titulo); margin: 0 0 4px; }
.capitulo h2 { font-size: clamp(28px, 3.4vw, 38px); color: var(--texto); margin-bottom: 20px; }
.capitulo .texto { overflow-wrap: anywhere; }
.capitulo .texto p { font: 400 19px/1.78 var(--serif); color: #e2ddd2; margin: 0 0 1.1em; }
.capitulo .texto p:first-child::first-letter { float: left; font: 400 3.3em/0.86 var(--titulo); color: var(--oro); padding: 6px 10px 0 0; }
.capitulo + .proximo { padding-top: 16px; border-top: 1px solid var(--borde); }
.proximo { max-width: 66ch; margin: 0; color: var(--tenue); font: italic 400 17px/1.5 var(--serif); }

.indice { max-width: 66ch; margin: 0 0 26px; border: 1px solid var(--borde); border-radius: 6px; background: #0b0d1266; }
.indice summary { cursor: pointer; padding: 10px 14px; color: var(--oro); font: 400 16px var(--titulo); }
.indice ol { margin: 0; padding: 4px 14px 12px 44px; max-height: 360px; overflow-y: auto; }
.indice li { padding: 3px 0; font-size: 15px; color: var(--tenue); }
.indice a { color: var(--texto); overflow-wrap: anywhere; text-decoration: none; }
.indice a:hover { color: var(--oro); }
.mas { margin-top: 16px; background: none; border: 1px solid var(--oro-viejo); color: var(--oro); font: 500 14px var(--sans);
  padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.mas:hover { background: #f0c45a12; }
.mas.antes, .mas.despues { margin: 0 0 32px; }

.bitacora { list-style: none; margin: 0; padding: 0; max-width: 76ch; }
.bitacora li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borde); font-size: 15px; }
.bitacora li span { overflow-wrap: anywhere; }
.bitacora time { color: var(--tenue); font-size: 13px; padding-top: 1px; }
.bitacora .muerte { color: var(--sangre); }
.bitacora .nivel { color: var(--epico); }
.bitacora .mision_completa { color: var(--poco); }
.bitacora .pvp_baja { color: var(--legendario); }

.lateral section { margin-bottom: 32px; }
.lateral h3 { font-size: 20px; margin-bottom: 8px; }
.lateral ul, .lateral ol { margin: 0; padding: 0; list-style: none; }
.lateral li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--borde); font-size: 15px; }
.lateral li span { overflow-wrap: anywhere; }
.lateral li span:first-child { min-width: 0; }
.lateral li span:last-child { color: var(--tenue); }
.lateral ol { counter-reset: zona; }
.lateral ol li { justify-content: flex-start; }
.lateral ol li::before { counter-increment: zona; content: counter(zona); color: var(--oro-viejo); min-width: 1.8em; }

@media (max-width: 560px) {
  .suceso { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "icono cuando" "icono texto"; gap: 2px 12px; align-items: start; }
  .suceso .icono { width: 36px; height: 36px; }
  .suceso .cuando { text-align: left; }
  .suceso .reloj { display: none; }
  .bitacora li { grid-template-columns: 1fr; gap: 0; }
  .capitulo .texto p { font-size: 18px; }
}

/* ---------- Crónica del gremio ---------- */
.acciones { display: flex; align-items: center; gap: 16px; flex: none; }
.nav-gremio { color: var(--tenue); text-decoration: none; font-size: 14px; }
.nav-gremio:hover, .nav-gremio:focus-visible { color: var(--oro); }
@media (max-width: 480px) { .cabecera { flex-wrap: wrap; } }

/* En la portada: la última página, como un pergamino colgado en el salón */
.pagina-gremio { max-width: 820px; margin: 30px auto 0; padding: 22px 28px 24px; text-align: left;
  background: linear-gradient(180deg, #ffffff08, #ffffff02); border: 1px solid #ffffff12; border-top: 2px solid var(--oro-viejo); border-radius: 6px; }
.pagina-gremio h2 { font-size: 15px; font-family: var(--sans); font-weight: 600; color: var(--tenue); margin-bottom: 12px; }
.pagina-gremio .numero { color: var(--oro); font: 400 15px var(--titulo); margin: 0; }
.pagina-gremio h3 { font-size: clamp(24px, 3vw, 32px); color: var(--texto); margin: 2px 0 12px; }
.pagina-gremio .extracto p { font: 400 18px/1.7 var(--serif); color: #e2ddd2; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pagina-gremio .leer { display: inline-block; margin-top: 14px; color: var(--oro); font-weight: 600; text-decoration: none; border-bottom: 1px solid #f0c45a66; }
.pagina-gremio .leer:hover { border-bottom-color: var(--oro); }
.pagina-gremio .vacio { margin: 0; }

/* La página de la crónica */
.heroe-gremio { display: block; text-align: center; padding-top: 22px; }
.heroe-gremio .emblema { margin-bottom: 12px; }
.heroe-gremio h1 { color: var(--oro); font-size: clamp(36px, 5.4vw, 64px); }
.heroe-gremio .linaje { max-width: 60ch; margin: 12px auto 0; }
.cuerpo-gremio { max-width: 66ch; margin: 40px auto 0; }