/* Eorzea Tracker — hoja de estilos única. Móvil primero.
   Ambientación: noche de Eorzea. Azul éter como acento vivo y dorado para lo
   ceremonial (títulos, cifras, remates). Casi sin arte del juego: todo CSS y SVG propio
   salvo dos excepciones pedidas, los iconos de los jobs y el aetheryte del logo. */

:root {
  --fondo: #0b0f1a;
  --fondo-elevado: #131a2b;
  --fondo-hundido: #0e1322;
  --borde: #253150;
  --texto: #e8ebf4;
  --texto-apagado: #8f97b3;
  --acento: #82aaff;
  --oro: #c7a662;
  --oro-texto: #d9bc7e;
  --hecho: #57b06d;
  --hecho-fondo: #16301f;
  --excluido: #6b7288;
  --conflicto: #e07856;
  --radio: 8px;
  --alto-cabecera: 3.5rem;
  /* Todo lo que se lee en columna (tablas, cabeceras de vista, títulos de bloque)
     termina en esta misma vertical: es lo que mantiene las páginas alineadas. */
  --ancho-lectura: 68rem;
  --fuente-display: "Palatino Linotype", Palatino, "Iowan Old Style", "Book Antiqua", Georgia, "Times New Roman", serif;
  --halo-1: rgb(130 170 255 / 0.07);
  --halo-2: rgb(199 166 98 / 0.05);
}

/* Tres estados: sin `data-tema` manda el sistema, y con él manda tu elección. Forzar
   oscuro no necesita repintar nada —basta con que el media query deje de aplicar— así
   que la única paleta que se escribe dos veces es la clara. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    /* Pergamino de día: hueso cálido, tinta azulada y el mismo oro, más oscuro. */
    --fondo: #f3f0e8;
    --fondo-elevado: #fbfaf5;
    --fondo-hundido: #ebe7db;
    --borde: #d6d0bf;
    --texto: #23293c;
    --texto-apagado: #6a7086;
    --acento: #33569f;
    --oro: #9a7b3f;
    --oro-texto: #7d6330;
    --hecho: #2f7d45;
    --hecho-fondo: #e4f0e5;
    --excluido: #878b9a;
    --conflicto: #b03d2c;
    --halo-1: rgb(51 86 159 / 0.05);
    --halo-2: rgb(154 123 63 / 0.06);
  }
}

:root[data-tema="claro"] {
  --fondo: #f3f0e8;
  --fondo-elevado: #fbfaf5;
  --fondo-hundido: #ebe7db;
  --borde: #d6d0bf;
  --texto: #23293c;
  --texto-apagado: #6a7086;
  --acento: #33569f;
  --oro: #9a7b3f;
  --oro-texto: #7d6330;
  --hecho: #2f7d45;
  --hecho-fondo: #e4f0e5;
  --excluido: #878b9a;
  --conflicto: #b03d2c;
  --halo-1: rgb(51 86 159 / 0.05);
  --halo-2: rgb(154 123 63 / 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(70rem 42rem at 82% -12%, var(--halo-1), transparent 65%),
    radial-gradient(50rem 34rem at -10% 30%, var(--halo-2), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--acento); }

/* Etiqueta ceremonial: versalitas doradas para rotular bloques y tarjetas. */
.rotulo {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--oro-texto);
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* --- Cabecera --------------------------------------------------------------- */

.cabecera {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  height: var(--alto-cabecera);
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(to bottom, var(--fondo-elevado), color-mix(in srgb, var(--fondo-elevado) 82%, var(--fondo)));
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Hilo dorado bajo la barra: se desvanece hacia los lados. */
.cabecera::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(to right, transparent 2%, color-mix(in srgb, var(--oro) 55%, transparent) 30%, color-mix(in srgb, var(--oro) 55%, transparent) 70%, transparent 98%);
  pointer-events: none;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--texto);
  flex: 0 1 auto;
  min-width: 0;
  width: 22rem;          /* mismo ancho que el lateral: forman una columna */
  max-width: 40vw;       /* pero cede antes que desbordar la barra */
  padding-right: 1rem;
  overflow: hidden;
}

/* El aetheryte del juego (PNG de 48×63 con fondo transparente), tal cual: sin halo, que
   el `drop-shadow` que llevaba el SVG a este tamaño se veía como un cuadradito más claro
   detrás del icono. Al pasar el ratón se aviva un poco, como al tocarlo. */
.cristal {
  width: 1.3rem;
  height: 1.7rem;
  flex: 0 0 auto;
  object-fit: contain;
  transition: filter 0.2s;
}
.marca:hover .cristal { filter: brightness(1.15); }

.marca-texto { display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; min-width: 0; overflow: hidden; }
.marca-texto b {
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.marca-texto small { font-size: 0.66rem; color: var(--oro-texto); letter-spacing: 0.18em; text-transform: uppercase; }

/* El buscador es el centro de la barra y ancla el desplegable de sugerencias. */
.buscador { flex: 1 1 12rem; min-width: 0; position: relative; }

.buscador input {
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font-size: 0.95rem;
}

.buscador input::placeholder { color: var(--texto-apagado); opacity: 0.75; }

.buscador input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--acento) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 16%, transparent);
}

.nav-usuario { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
.usuario { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icono {
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto);
  border-radius: var(--radio);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.usuario { color: var(--texto-apagado); font-size: 0.9rem; }

/* Selector de tema. Cicla entre automático, claro y oscuro: tres estados y no dos,
   porque «lo que diga el sistema» es una elección más y la de partida. */
.tema {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
  color: var(--texto-apagado);
  cursor: pointer;
  line-height: 1;
}

.tema:hover { color: var(--acento); border-color: var(--acento); }
.tema svg { width: 1rem; height: 1rem; fill: currentColor; }

/* Solo se enseña el icono del estado en curso; los otros dos esperan su turno. */
.tema-icono { display: none; }
:root:not([data-tema]) .tema-icono-auto,
:root[data-tema="claro"] .tema-icono-claro,
:root[data-tema="oscuro"] .tema-icono-oscuro { display: block; }

/* Enlace a la conexión con Lodestone, en la cabecera junto a la cuenta. */
.enlace-lodestone {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--texto-apagado);
  text-decoration: none;
  white-space: nowrap;
}

.enlace-lodestone:hover { color: var(--acento); }

/* Con la sesión caducada deja de ser un ajuste más y pasa a pedir atención. */
.enlace-lodestone.caducada,
.enlace-lodestone.caducada:hover { color: var(--conflicto); }

.aviso-caducada {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--fondo);
  background: var(--conflicto);
}

/* --- Disposición ------------------------------------------------------------ */

.disposicion { display: flex; align-items: flex-start; }

/* Cifras arriba y árbol debajo, en una sola columna que llega hasta abajo de la
   ventana aunque el árbol sea corto: es `height` y no `max-height` para que el fondo
   no se corte a media pantalla. */
/* 23rem y no 20: con el porcentaje al lado del contador, los nombres de sección se
   quedaban en «HISTORIA PRINCIP…». */
.columna-lateral {
  flex: 0 0 23rem;
  width: 23rem;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--alto-cabecera));
  position: sticky;
  top: var(--alto-cabecera);
  border-right: 1px solid var(--borde);
  background: var(--fondo-hundido);
  /* Sin `overflow: hidden`: recortaba los menús de job contra el borde de la columna.
     No hace falta — el árbol se contiene solo con su propio desplazamiento. */
}

/* Las cifras no se desplazan: manda el árbol, que es lo que crece. */
.columna-lateral .resumen {
  flex: 0 0 auto;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0.9rem 0.9rem 0.2rem;
  border-bottom: 1px solid var(--borde);
}

/* `overflow: visible` es imprescindible aquí: la tarjeta lo recorta por su esquirla
   dorada, y en la columna esa esquirla no se pinta pero el recorte se llevaba por
   delante los menús desplegables del job. */
.columna-lateral .kpi {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 0.75rem;
  overflow: visible;
}
.columna-lateral .kpi::before { display: none; }
.columna-lateral .kpi + .kpi { border-top: 1px solid var(--borde); padding-top: 0.75rem; }
.columna-lateral .kpi-cifra { font-size: 1.6rem; }

.lateral {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem 0.7rem 2rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}

/* Centrado: con la columna fija a la izquierda y el tope de lectura, en pantallas
   anchas el contenido se quedaba pegado al lateral con un desierto a la derecha. */
.contenido {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 5rem;
}

/* --- Árbol lateral ---------------------------------------------------------- */

.arbol { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }

/* Guía de indentación: una línea fina marca cada nivel de profundidad. Ajustada al
   mínimo legible porque cada nivel se lo quita al nombre, y los de cuarto nivel
   —«Parche 2.2 (Through the Maelstrom)»— ya van justos. */
.arbol .arbol {
  border-left: 1px solid color-mix(in srgb, var(--borde) 75%, transparent);
  margin-left: 0.45rem;
  padding-left: 0.3rem;
}

.rama { margin: 0; }

/* Las raíces del árbol son grupos, no una rama más: rótulo dorado y aire entre bloques. */
#arbol-completo > .arbol > .rama { margin-bottom: 1rem; }

#arbol-completo > .arbol > .rama > .rama-fila > .rama-nombre {
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--oro-texto);
}

#arbol-completo > .arbol > .rama.activa > .rama-fila > .rama-nombre,
#arbol-completo > .arbol > .rama > .rama-fila > .rama-nombre:hover { color: var(--acento); }

/* Colores por expansión: cada era tiene el suyo, sin usar arte del juego. */
.exp-arr { --exp: #c9a45c; }
.exp-heavensward { --exp: #6f9dd6; }
.exp-stormblood { --exp: #d0655a; }
.exp-shadowbringers { --exp: #9067c8; }
.exp-endwalker { --exp: #a8b0e0; }
.exp-dawntrail { --exp: #de913f; }

/* El diamante de color se pinta en las expansiones (segundo nivel) y en la lista plana
   del filtro, donde ayuda a saber de qué era es cada resultado. */
#arbol-completo > .arbol > .rama > .ramas > .arbol > .rama[class*="exp-"] > .rama-fila > .rama-nombre::before,
.arbol-plano .rama[class*="exp-"] .rama-nombre::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  transform: rotate(45deg);
  background: var(--exp, var(--texto-apagado));
  border-radius: 1px;
  vertical-align: 1px;
}

/* Dentro de una expansión, sus barras de progreso se tiñen de su color. */
.arbol .arbol .rama[class*="exp-"] > .barra > .barra-hecho { background: var(--exp); }

.rama-fila {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radio);
  padding-right: 0.3rem;
}

/* La fila entera se enciende: pulsar el nombre despliega, así que la zona pulsable
   es toda ella y conviene que se note. */
.rama-fila:hover { background: var(--fondo-elevado); }
.rama-fila:hover > .rama-nombre { color: var(--acento); }
.rama-fila:hover > .pico::before { border-color: var(--acento); }

/* El pico se dibuja en CSS: como triángulo inline pesaba 240 bytes por nodo. */
.pico {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.pico:not(.pico-vacio)::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 5px;
  height: 5px;
  border-right: 1.6px solid var(--texto-apagado);
  border-bottom: 1.6px solid var(--texto-apagado);
  transform: translate(-60%, -50%) rotate(-45deg);
  transition: transform 0.12s;
}

.pico:hover::before { border-color: var(--acento); }
.pico-vacio { cursor: default; }

.rama.desplegada > .rama-fila > .pico::before {
  transform: translate(-50%, -60%) rotate(45deg);
}

.pico:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 3px; }

/* El nombre corto se calcula en la importación; aquí solo se corta lo que aun así se pase. */
.rama-nombre {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--texto);
  text-decoration: none;
  padding: 0.22rem 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rama-nombre:hover { color: var(--acento); }

/* La flecha es la única manera de entrar a la sección desde el árbol, así que reserva
   su hueco siempre: si apareciera de la nada al pasar el ratón, cada fila daría un
   salto y el nombre se recortaría de golpe. */
.rama-ir {
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--texto-apagado);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.1s;
}

.rama-fila:hover .rama-ir, .rama-ir:focus-visible { opacity: 1; }
.rama-ir:hover { color: var(--acento); }
.rama.activa > .rama-fila > .rama-ir { opacity: 1; color: var(--acento); }
@media (hover: none) { .rama-ir { opacity: 1; } }

.rama-fila { padding: 0 0.3rem 0 0; }

/* La rama activa se marca con una vela de éter en el borde, no solo con el fondo. */
.rama.activa > .rama-fila {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--acento);
}
.rama.activa > .rama-fila > .rama-nombre { color: var(--acento); font-weight: 600; }

/* Lo terminado se aparta del camino sin desaparecer: si no hay nada que hacer ahí,
   no debe competir por la atención con lo que sí. */
.rama.completa > .rama-fila > .rama-nombre { color: var(--texto-apagado); }
.rama.completa > .barra { opacity: 0.45; }

.rama-estado {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-apagado);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.rama-estado.hecha { color: var(--hecho); }
.rama-pct { margin-left: 0.35rem; opacity: 0.6; }

/* Del tercer nivel para abajo el nombre es largo y el ancho escaso: el porcentaje se
   queda para las ramas de arriba, que es donde se mira. La fracción sigue estando. */
.arbol .arbol .arbol .rama-pct { display: none; }

/* El pin reserva su hueco siempre aunque no se vea: si apareciera solo al pasar el
   ratón, cada fila daría un salto y el nombre se recortaría de golpe. */
.pin {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.2rem;
  margin-left: 0.15rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--texto-apagado);
  opacity: 0;
  transition: opacity 0.1s;
}

.pin svg { width: 0.72rem; height: 0.72rem; fill: currentColor; vertical-align: middle; }
.rama-fila:hover .pin, .pin:focus-visible { opacity: 1; }
.pin:hover { color: var(--acento); }
.pin:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 3px; }

/* Fijada: se queda a la vista y en oro, que es lo que la distingue del resto. */
.pin.fijada { opacity: 1; color: var(--oro-texto); }
.pin.fijada:hover { color: var(--conflicto); }

@media (hover: none) { .pin { opacity: 1; } }

/* El carril tiene que verse aunque esté vacío: es lo que dice cuánto falta. Con el
   borde a media opacidad se perdía contra el fondo hundido de la columna. */
.barra {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--texto-apagado) 28%, transparent);
  overflow: hidden;
  margin: -2px 0.3rem 0.25rem 1.5rem;
}

.barra-hecho { display: block; height: 100%; background: var(--hecho); }

.ramas:empty { display: none; }
.rama:not(.desplegada) > .ramas { display: none; }

/* --- Panel ------------------------------------------------------------------ */

.resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.kpi {
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
}

/* Esquirla dorada en la esquina: remate, no marco. */
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 2.6rem;
  height: 2px;
  background: linear-gradient(to right, var(--oro), transparent);
}

.kpi-cifra { font-family: var(--fuente-display); font-size: 2.05rem; font-weight: 600; line-height: 1.1; }
/* El símbolo acompaña a la cifra, no la decora: mismo color, algo más tenue. */
.kpi-cifra small { font-size: 1.05rem; font-weight: 400; color: inherit; opacity: 0.65; margin-left: 0.1rem; }
.kpi-detalle { font-size: 0.8rem; color: var(--texto-apagado); }
.kpi-editar { text-decoration: none; margin-top: auto; }
.kpi-editar:hover { color: var(--acento); }

/* La cifra manda y la era la acompaña al lado, en pequeño. El número se queda en
   blanco: en color de era costaba de leer sobre el fondo hundido de la columna, y el
   color ya lo lleva el nombre y la barra. */
.kpi-era-fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.5rem; }
.kpi-era-fila .kpi-cifra { line-height: 1.05; }

.kpi-era {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--exp, var(--texto-apagado));
}
/* Gana al degradado éter→oro de los demás KPI: aquí manda el color de la era. */
.kpi .barra-era .barra-hecho { background: var(--exp, var(--acento)); }

.kpi-global {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.4rem;
}

.kpi-global-cifra { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-global-pie { font-size: 0.75rem; color: var(--texto-apagado); }
.kpi-global .barra { flex-basis: 100%; margin: 0.3rem 0 0; height: 3px; }

/* --- Por dónde va el otro ------------------------------------------------------- */

/* La tarjeta de historia arranca en dos columnas: tu rótulo y tu cifra a la izquierda
   y, en la esquina, por dónde va el compañero en dos líneas de texto —nombre con su x/y
   y cifra con su era—, lo justo para saber si te ha adelantado. Sin recuadro ni barra:
   es un dato de reojo y no tiene que competir con el tuyo. Tu barra sigue debajo, a lo
   ancho, y tu rótulo y tu cifra van pegados como siempre; las dos líneas del compañero
   también van juntas, arriba, con su nombre a la altura de tu rótulo. Lo tuyo no se
   encoge: si no cabe todo, es él quien parte su era a otra línea. */
.kpi-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.25rem 0.7rem; }
.kpi-propio { display: flex; flex-direction: column; gap: 0.25rem; flex: 0 0 auto; }

.kpi-companero {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/* Nombre a un lado y recuento al otro, en la misma línea: el x/y tiene que verse sin
   pasar el ratón, y una línea propia lo haría más alto que lo tuyo. */
.companero-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; width: 100%; }
/* El nombre en el estilo del rótulo pero apagado: el de la tarjeta sigue mandando. */
.companero-nombre { color: var(--texto-apagado); letter-spacing: 0.12em; }
.companero-cuenta { font-size: 0.72rem; color: var(--texto-apagado); font-variant-numeric: tabular-nums; white-space: nowrap; }

.companero-cifra {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0 0.35rem;
  line-height: 1.15;
}
.companero-cifra b { font-family: var(--fuente-display); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.companero-cifra b small { font-size: 0.7rem; font-weight: 400; opacity: 0.65; margin-left: 0.05rem; }
.companero-cifra .kpi-era { font-size: 0.72rem; }

/* --- Jobs fijados en «Tu nivel» ------------------------------------------------ */

/* El job que llevas va al lado del nivel máximo, no debajo: son el mismo dato visto
   de dos maneras y en una columna estrecha cada renglón cuenta. */
.kpi-nivel-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.7rem; }
.kpi-nivel-fila .kpi-cifra { line-height: 1; }
.kpi-nivel-fila .jobs-fijados { margin: 0; }

.jobs-fijados { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.55rem 0 0; }
.job-vacio { font-size: 0.78rem; color: var(--texto-apagado); }
.job-fijado.principal { border-color: color-mix(in srgb, var(--rol, var(--acento)) 60%, transparent); background: color-mix(in srgb, var(--rol, var(--acento)) 10%, transparent); }

/* --- Menús pequeños de job ------------------------------------------------------ */

.menu-job { position: relative; }

.boton-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto-apagado);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.boton-icono::-webkit-details-marker { display: none; }
.boton-icono:hover { color: var(--acento); border-color: var(--acento); }
.menu-job[open] .boton-icono { color: var(--acento); border-color: var(--acento); }

.menu-job-lista {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 25;
  width: 13rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--fondo-elevado);
  border: 1px solid color-mix(in srgb, var(--oro) 22%, var(--borde));
  border-radius: var(--radio);
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.45);
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}

.menu-job-lista .rotulo { margin: 0 0 0.4rem; }
.menu-job-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.menu-job-chips .rotulo { flex-basis: 100%; }

.menu-job-linea {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.35rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.menu-job-linea:hover { background: var(--fondo-hundido); }
.menu-job-linea span:not(.job-fijado-nivel) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-job-vacio { font-size: 0.8rem; color: var(--texto-apagado); margin: 0.2rem 0; }

.menu-job-pie {
  display: block;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--borde);
  font-size: 0.78rem;
  text-decoration: none;
}

/* Pastilla mínima: una sola línea de alto. Las flechas van en fila —subir a la
   izquierda, bajar a la derecha— y no apiladas, que era lo que obligaba al chip a
   medir el doble de alto. */
.job-fijado {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.15rem 0.05rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--rol, var(--borde)) 30%, var(--borde));
  border-radius: 5px;
  font-size: 0.74rem;
  line-height: 1.3;
}

.job-fijado-abrev { color: var(--rol, var(--texto)); letter-spacing: 0.03em; }
.job-fijado-nivel { font-variant-numeric: tabular-nums; color: var(--texto); }

.job-fijado-botones { display: inline-flex; gap: 1px; }

.job-fijado-botones button {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  width: 0.95rem;
  height: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--texto-apagado);
  cursor: pointer;
}

.job-fijado-botones button:hover { color: var(--acento); background: color-mix(in srgb, var(--acento) 18%, transparent); }
.job-fijado-botones button:focus-visible { outline: 1px solid var(--acento); }

/* La barra dentro de un KPI es un medidor: éter que se va volviendo oro. El carril se
   deja al valor general y no en `--fondo-hundido`: en la columna lateral ese es justo
   el color del fondo, así que el tramo por hacer desaparecía. */
.kpi .barra { margin: 0.45rem 0 0.15rem; height: 4px; border-radius: 2px; }
.kpi .barra-hecho { background: linear-gradient(to right, var(--acento), var(--oro)); }

.bloque { margin-bottom: 2.4rem; }

h1 {
  font-family: var(--fuente-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
}

h2 { font-size: 1.1rem; margin: 0 0 0.3rem; }

/* Los títulos de bloque del panel: serifa y un hilo dorado que se pierde a la derecha. */
.bloque > h2 {
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: var(--ancho-lectura);
}

.bloque > h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, color-mix(in srgb, var(--oro) 40%, transparent), transparent 85%);
}
.apagado { color: var(--texto-apagado); font-size: 0.88rem; margin: 0.2rem 0 0.8rem; }
.lo-buscado { color: var(--oro-texto); font-weight: 600; }

/* --- Panel a dos columnas ------------------------------------------------------ */

/* «¿Por dónde voy?» a la izquierda, «¿qué más puedo hacer?» a la derecha. */
.panel-columnas { display: grid; gap: 0 1.75rem; }

.panel-columnas .panel-col { margin-bottom: 1.5rem; }
.panel-columnas .apagado { margin: 0.2rem 0 0.6rem; }
.sin-nada { padding: 0.9rem; margin: 0; }

/* --- Lo que estás siguiendo --------------------------------------------------- */

.haciendo-ahora { margin-bottom: 1.6rem; }
.haciendo-ahora .rotulo { margin-bottom: 0.45rem; }
.chips-haciendo { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip-haciendo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background: color-mix(in srgb, var(--acento) 12%, var(--fondo-elevado));
  color: var(--texto);
  padding: 0.3rem 0.75rem;
}

.chip-haciendo:hover { border-color: var(--acento); color: var(--texto); }

.chip-nivel {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
  font-weight: 700;
}

/* --- Pestañas de una columna --------------------------------------------------- */

/* Una sola franja que se desplaza a lo ancho. En pastillas apiladas, los trece tipos
   ocupaban tres filas y hundían la tabla media pantalla. */
.franja-pestanas {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.7rem;
}

/* La caja ancla las señales de «hay más»: van sobre la franja, y si colgaran de ella
   —que es la que desplaza— viajarían con las pestañas en lugar de quedarse quietas. */
.pestanas-caja { position: relative; flex: 1 1 auto; min-width: 0; }

/* `overflow-y: hidden` es obligatorio, no decorativo: al poner un solo eje en `auto`
   el otro deja de ser `visible` y sale también su barra, así que la franja se
   quedaba con un scroll vertical de dos píxeles. */
.pestanas {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  gap: 0.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* Sin barra: se desplaza con la rueda y los bordes avisan de que hay más. */
  scrollbar-width: none;
}

.pestanas::-webkit-scrollbar { width: 0; height: 0; }

/* Las pestañas se desvanecen contra el borde por el que queda algo por ver. Con
   máscara y no con un degradado encima no hay que acertar el color del fondo, que
   aquí lleva los halos de éter y no es plano. */
.pestanas-caja.hay-antes.hay-despues .pestanas {
  mask-image: linear-gradient(to right, transparent, #000 1.8rem, #000 calc(100% - 1.8rem), transparent);
}

.pestanas-caja.hay-antes:not(.hay-despues) .pestanas {
  mask-image: linear-gradient(to right, transparent, #000 1.8rem);
}

.pestanas-caja.hay-despues:not(.hay-antes) .pestanas {
  mask-image: linear-gradient(to right, #000 calc(100% - 1.8rem), transparent);
}

/* Y una flecha, que el desvanecido solo se entiende cuando ya sabes que hay más. */
.pestanas-caja::before,
.pestanas-caja::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--texto-apagado);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.pestanas-caja::before { content: "‹"; left: 0.1rem; }
.pestanas-caja::after { content: "›"; right: 0.1rem; }
.pestanas-caja.hay-antes::before { opacity: 1; }
.pestanas-caja.hay-despues::after { opacity: 1; }

.pestana {
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border-bottom: 2px solid transparent;
  color: var(--texto-apagado);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.82rem;
}

.pestana:hover { color: var(--texto); }
.pestana-cuenta { font-size: 0.72rem; opacity: 0.7; font-variant-numeric: tabular-nums; }

.pestana.activa {
  color: var(--acento);
  border-bottom-color: var(--acento);
  font-weight: 600;
}

.pestana.activa .pestana-cuenta { opacity: 1; }

/* --- Embudo: qué categorías llegan a la franja --------------------------------- */

.embudo { position: relative; flex: 0 0 auto; }

.embudo-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 100%;
  cursor: pointer;
  color: var(--texto-apagado);
  list-style: none;
}

/* Safari pinta su propio triángulo en el summary si no se le quita el marcador. */
.embudo-boton::-webkit-details-marker { display: none; }
.embudo-boton svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.embudo-boton:hover { color: var(--acento); }
.embudo[open] .embudo-boton { color: var(--acento); }

/* Desplaza la lista, no el menú: así el botón de aplicar es un pie fijo y no hay que
   bajar hasta el final de treinta y tantas casillas para llegar a él. */
.embudo-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 25;
  width: 15rem;
  max-height: 22rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.6rem;
  background: var(--fondo-elevado);
  border: 1px solid color-mix(in srgb, var(--oro) 22%, var(--borde));
  border-radius: var(--radio);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
}

.embudo-lista {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}

.embudo-menu .rotulo { margin: 0 0 0.5rem; }

.embudo-linea {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.2rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

.embudo-linea:hover { background: var(--fondo-hundido); }
.embudo-linea span:not(.embudo-cuenta) { flex: 1 1 auto; }
.embudo-linea input { accent-color: var(--acento); }

.embudo-cuenta {
  font-size: 0.72rem;
  color: var(--texto-apagado);
  font-variant-numeric: tabular-nums;
}

.embudo-menu .boton { flex: 0 0 auto; width: 100%; margin-top: 0.7rem; }

/* «Seleccionar todo» manda sobre el resto: se separa con un filo para que no se lea
   como una categoría más de la lista. */
.embudo-todo {
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0.35rem;
  padding-bottom: 0.4rem;
  border-radius: 0;
  font-weight: 600;
}

.embudo-todo:hover { background: none; color: var(--acento); }

/* El desplegable de clases cuelga de la línea de «Misiones de job». */
.embudo-rama { margin: 0.1rem 0 0.4rem 1.55rem; }

.embudo-rama > summary {
  font-size: 0.78rem;
  color: var(--acento);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  list-style: none;
}

.embudo-rama > summary::before { content: "▸ "; display: inline-block; transition: transform 0.12s; }
.embudo-rama[open] > summary::before { content: "▾ "; }
.embudo-rama > summary::-webkit-details-marker { display: none; }
.embudo-rama > summary:hover { background: var(--fondo-hundido); }

/* El rótulo del rol es también su interruptor: mismo aspecto de antes, pero pulsable. */
.embudo-grupo {
  margin: 0.5rem 0 0.15rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-apagado);
}

.embudo-grupo:hover { color: var(--texto); }

/* Las clases se sangran bajo su rol para que se vea de quién dependen. */
.embudo-rama .embudo-clase { padding-left: 1rem; }

.embudo-rama .embudo-linea { font-size: 0.82rem; }
.embudo-rama .embudo-cuenta { font-size: 0.62rem; letter-spacing: 0.04em; }

@media (min-width: 80rem) {
  /* Cada columna ocupa las mismas cuatro filas —título, entradilla, chips y cuerpo—
     y las hereda con `subgrid`. Así las tablas empiezan a la misma altura aunque una
     columna tenga trece chips y la otra uno solo; con dos rejillas independientes
     cada bloque caía donde le tocaba y salía el escalón. */
  .panel-columnas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }

  .panel-columnas .panel-col {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    align-items: start;
    margin-bottom: 0;
    grid-template-columns: minmax(0, 1fr);
    /* Un ítem de rejilla no baja de su contenido mínimo salvo que se le diga, y hay
       que decírselo a la columna *y* a lo que lleva dentro: con la franja de pestañas
       en una sola línea ese mínimo es la suma de las trece, y sin esto se salía de la
       pantalla por más que la pista fuese `minmax(0, 1fr)`. */
    min-width: 0;
  }

  .panel-columnas .panel-col > * { min-width: 0; }

  /* El tipo ya lo dicen las pestañas de arriba; el «dónde» baja bajo el nombre
     (modo compacto de la fila). En media pantalla no caben como columnas. */
  .panel-columnas .c-tipo { display: none; }

  /* Con reparto automático la tabla no puede encoger por debajo de su contenido: los
     nombres y los desbloqueos son `nowrap`, así que imponían su ancho, el ellipsis no
     llegaba a actuar nunca y la tabla se salía de la columna (y de la ventana). Con
     reparto fijo manda el ancho de la columna y el texto sí se recorta.

     Solo aquí: a una columna las tablas tienen sitio de sobra, y con reparto fijo y
     «Tipo» y «Dónde» de vuelta las cuatro columnas se partirían el ancho a partes
     iguales, que es peor que el problema que resuelve. */
  .panel-columnas .tabla-entradas { table-layout: fixed; }
  .panel-columnas .c-marca { width: 2.4rem; }
  .panel-columnas .c-nivel { width: 3.2rem; }

  /* Sin tope, la lista de disponibles son cientos de filas y la columna medía cinco
     veces más que la otra. A una sola columna estorba: la página ya se desplaza. */
  .cuerpo-col { max-height: 34rem; overflow-y: auto; }
}

/* La caja con borde es el cuerpo, no la tabla: es la que recorta el desplazamiento. */
.panel-columnas .tabla-entradas { border: 0; border-radius: 0; margin: 0; }

.cuerpo-col {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}

.cuerpo-col thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--fondo-hundido) 70%, var(--fondo-elevado));
}

.bloque-ancho { margin-bottom: 2rem; }

/* La siguiente misión de la historia, encendida dentro de su tabla. */
.fila.siguiente {
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--acento);
}

.fila.siguiente .nombre { font-weight: 600; }
.fila.siguiente .casilla { border-color: var(--acento); }

/* De qué es la entrada: categoría y, si la tiene, la sección concreta. En una lista
   mezclada «Way of the Lancer» a secas no dice si es de job, de desbloqueo o de otra. */
.pastilla-contexto {
  background: color-mix(in srgb, var(--oro) 13%, transparent);
  color: var(--oro-texto);
  margin-right: 0.2rem;
}

.pastilla-siguiente {
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  color: var(--acento);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Filtros ------------------------------------------------------------------ */

.filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; align-items: center; }

.filtro {
  font-size: 0.82rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
  background: var(--fondo-elevado);
  user-select: none;
}

.filtro input { display: none; }
.filtro.activo { border-color: var(--acento); color: var(--acento); }
.quitar-filtros { font-size: 0.82rem; }

/* --- Tablas ----------------------------------------------------------------- */

.tabla-entradas {
  width: 100%;
  max-width: var(--ancho-lectura);
  border-collapse: collapse;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.tabla-entradas th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-apagado);
  font-weight: 600;
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla-entradas th { background: color-mix(in srgb, var(--fondo-hundido) 65%, transparent); }

/* Separador de tramo de historia: rótulo dorado a lo ancho de la tabla. */
tr.tramo td {
  padding: 0.6rem 0.55rem 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--oro) 28%, var(--borde));
  background: color-mix(in srgb, var(--fondo-hundido) 55%, transparent);
  font-size: 0.65rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--oro-texto);
}

.tabla-entradas tbody tr.tramo:first-child td { padding-top: 0.45rem; }

.tabla-entradas td {
  padding: 0.42rem 0.55rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: baseline;
}

.tabla-entradas tr:last-child td { border-bottom: 0; }
.fila:hover { background: var(--fondo-hundido); }

/* Destello de éter al marcar: la fila recién intercambiada llega encendida (la clase
   htmx-settling dura lo que el settle) y la transición la apaga suavemente. */
@media (prefers-reduced-motion: no-preference) {
  .fila { transition: background-color 0.6s ease; }
  tr.htmx-settling.fila { background-color: color-mix(in srgb, var(--acento) 22%, transparent); transition: none; }

  tr.htmx-settling .casilla { animation: pop-casilla 0.35s ease; }

  @keyframes pop-casilla {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
}

/* Anchos al mínimo: el nombre se queda con todo lo que sobra. */
.c-marca { width: 1px; padding-right: 0.3rem !important; }
.c-nivel {
  width: 2.5rem;
  color: var(--texto-apagado);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  padding-right: 0.9rem !important;
}
.c-tipo { width: 1px; white-space: nowrap; }
.c-nombre { width: auto; }
.c-donde { width: 1px; font-size: 0.82rem; color: var(--texto-apagado); white-space: nowrap; }
.c-verif { width: 1px; text-align: center; padding-right: 0.85rem !important; }

/* Antes se llamaba `.marca`, igual que el logo de la cabecera: sus reglas pisaban
   a las de la marca y el nombre de la aplicación llevaba sin verse desde entonces. */
.casilla {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid var(--borde);
  border-radius: 4px;
  background: var(--fondo);
  color: var(--texto);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
  position: relative;
  top: 0.1rem;
}

.casilla:hover { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }
.casilla:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Hecho se rellena; excluido se aparta con borde discontinuo. Dos gestos distintos
   para dos ideas distintas: conseguido vs «no pienso hacerlo». */
.fila.estado-done .casilla { color: #fff; border-color: var(--hecho); background: var(--hecho); }
.fila.estado-done .nombre { color: var(--texto-apagado); }

.fila.estado-excluded { opacity: 0.6; }
.fila.estado-excluded .casilla { border-style: dashed; color: var(--excluido); }
.fila.estado-excluded .nombre { text-decoration: line-through; color: var(--texto-apagado); }

.linea-nombre { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }

/* El nombre cede sitio de mala gana: cuando la fila no cabe, lo primero que se
   recorta es el desbloqueo. Con el mismo factor de encogimiento en los dos, el
   desbloqueo (más largo de origen) se quedaba más ancho que la propia misión. */
/* El nombre abre la ficha: es un botón, pero tiene que seguir leyéndose como texto. */
.nombre {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.nombre:hover { color: var(--acento); }
.nombre:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; }

.notas { display: block; font-size: 0.78rem; color: var(--texto-apagado); line-height: 1.35; }
.donde-linea { display: block; font-size: 0.78rem; color: var(--texto-apagado); line-height: 1.35; }
.npc { color: var(--texto); }
.zona::before { content: " · "; }
/* Sin NPC delante, la zona abre la celda: el separador sobra. */
.c-donde .zona:first-child::before { content: ""; }
.coord { font-variant-numeric: tabular-nums; opacity: 0.7; }

.desbloqueo {
  font-size: 0.72rem;
  color: var(--acento);
  white-space: nowrap;
  flex: 0 12 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desbloqueo::before { content: "↳ "; opacity: 0.6; }

.pastilla {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0 0.4rem;
  border-radius: 3px;
  background: var(--fondo-hundido);
  color: var(--texto-apagado);
  white-space: nowrap;
}

.verif { font-weight: 700; }
.verif.confirmada { color: var(--hecho); }
.verif.conflicto { color: var(--conflicto); }
.verif.sin-datos, .verif.desmentida, .verif.no-verificable { color: var(--excluido); font-weight: 400; }

/* --- Vista de sección ------------------------------------------------------- */

.cabecera-vista {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--oro) 20%, transparent);
  max-width: var(--ancho-lectura);
}

.linea-progreso {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--texto-apagado);
}

.barra-ancha { flex: 1 1 12rem; max-width: 22rem; height: 5px; margin: 0; }
.linea-progreso .cifra { font-variant-numeric: tabular-nums; color: var(--texto); }
.contexto { white-space: nowrap; }

/* La barra grande de la sección es un medidor, como los KPI: éter que se vuelve oro. */
.linea-progreso .barra-hecho { background: linear-gradient(to right, var(--acento), var(--oro)); }

/* Bloques plegables dentro de una sección. */
.bloque-seccion { margin-bottom: 0.4rem; }

.titulo-bloque {
  margin: 1.4rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  max-width: var(--ancho-lectura);
}

/* Todo lo que se pliega se enciende al pasar por encima, igual que la flecha del
   árbol: es lo que dice que se puede pulsar. */
.titulo-bloque { cursor: pointer; }
.titulo-bloque:hover { color: var(--acento); }
.titulo-bloque:hover .plegar::before { border-color: var(--acento); }
.titulo-bloque:hover .cifra { color: var(--acento); }

.titulo-bloque.nivel-2 { font-size: 0.92rem; }
.titulo-bloque.nivel-3 { font-size: 0.86rem; font-weight: 500; color: var(--texto-apagado); }

.titulo-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo-bloque .cifra { font-size: 0.75rem; font-weight: 400; color: var(--texto-apagado); font-variant-numeric: tabular-nums; }
.titulo-bloque .cifra.hecha { color: var(--hecho); }
.barra-titulo { width: 3.5rem; flex: 0 0 auto; margin: 0; height: 3px; }

.plegar {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.3rem;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.plegar::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 5px;
  height: 5px;
  border-right: 1.6px solid var(--texto-apagado);
  border-bottom: 1.6px solid var(--texto-apagado);
  transform: translate(-50%, -60%) rotate(45deg);
  transition: transform 0.12s;
}

.plegar:hover::before { border-color: var(--acento); }
.plegar:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 3px; }

.bloque-seccion.plegado .plegar::before { transform: translate(-60%, -50%) rotate(-45deg); }
.bloque-seccion.plegado .cuerpo-bloque { display: none; }

.nota-seccion {
  margin: 1.2rem 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--acento);
  background: var(--fondo-elevado);
  font-size: 0.88rem;
  color: var(--texto-apagado);
  max-width: var(--ancho-lectura);
}

/* --- Formularios y avisos --------------------------------------------------- */

.tarjeta {
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
}

.tarjeta-estrecha { max-width: 24rem; margin: 3rem auto; }

/* La puerta de entrada: cristal centrado y el formulario debajo, a la izquierda. */
.tarjeta-entrar { text-align: center; margin-top: 12vh; }
.tarjeta-entrar .formulario { text-align: left; }
.tarjeta-entrar .apagado { margin-bottom: 1.4rem; }

.cristal-portada {
  width: 2.6rem;
  height: 3.2rem;
  margin-bottom: 0.4rem;
}

.formulario { display: flex; flex-direction: column; gap: 0.4rem; }
.formulario label { font-size: 0.85rem; color: var(--texto-apagado); margin-top: 0.6rem; }

.formulario input {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font-size: 1rem;
}

.boton {
  margin-top: 1.2rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: var(--radio);
  background: var(--acento);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.boton-pequeno { margin-top: 0.4rem; padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.boton-enlace {
  border: 0; background: none; color: var(--acento);
  cursor: pointer; font-size: 0.9rem; padding: 0;
}

/* --- Conexión con Lodestone ------------------------------------------------------ */

.estado-conexion {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--fondo-hundido);
  font-size: 0.9rem;
}

.estado-conexion.conectado { border-color: color-mix(in srgb, var(--hecho) 55%, transparent); }
.estado-conexion.caducado { border-color: color-mix(in srgb, var(--conflicto) 55%, transparent); }
.estado-conexion code { font-size: 0.85em; color: var(--texto-apagado); }

.ayuda-cookie { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.ayuda-cookie > summary { cursor: pointer; color: var(--acento); font-size: 0.9rem; }
.ayuda-cookie ol { margin: 0.7rem 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.7; }
.ayuda-cookie code { background: var(--fondo-hundido); padding: 0 0.25rem; border-radius: 3px; }

.ayuda-cookie kbd {
  background: var(--fondo-hundido);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 0 0.3rem;
  font-size: 0.85em;
}

.formulario-olvidar { margin-top: 1rem; }
.conflicto-texto { color: var(--conflicto); }

/* El punto que late mientras hay una sincronización viva: la señal de que la pantalla
   se mueve sola y no hace falta recargar. */
.latido {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--acento);
  margin-right: 0.35em;
  animation: latido 1.6s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.lista-conflictos { list-style: none; margin: 0; padding: 0; max-width: var(--ancho-lectura); }

.lista-conflictos li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--borde);
}

.lista-conflictos li:hover { background: var(--fondo-hundido); }
.lista-conflictos .apagado { margin: 0; font-size: 0.8rem; }

.avisos { list-style: none; margin: 0 0 1.2rem; padding: 0; max-width: var(--ancho-lectura); }

.aviso {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--fondo-elevado);
  margin-bottom: 0.5rem;
}

.aviso-error { border-color: var(--conflicto); color: var(--conflicto); }

.solo-movil { display: none; }

/* --- Móvil ------------------------------------------------------------------ */

@media (max-width: 60rem) {
  :root { --alto-cabecera: 6rem; }
  .cabecera { height: auto; min-height: var(--alto-cabecera); padding: 0.5rem 1rem; flex-wrap: wrap; }
  .marca { width: auto; }
  .solo-movil { display: inline; }

  /* En móvil la columna entera es el cajón: cifras arriba y árbol debajo. */
  .columna-lateral {
    display: none;
    position: fixed;
    inset: var(--alto-cabecera) 0 0 0;
    width: 100%;
    height: auto;
    flex: none;
    z-index: 20;
  }

  .menu-abierto .columna-lateral { display: flex; }

  .c-donde, .c-tipo { display: none; }
  .c-verif { display: none; }
  .contenido { padding: 1rem 0.6rem 4rem; }
  .buscador { order: 3; flex-basis: 100%; }
  .resumen { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }
  .kpi-cifra { font-size: 1.6rem; }
}

/* --- Acciones de fila -------------------------------------------------------- */

/* Las acciones se anclan al borde derecho de la celda. */
.acciones {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  gap: 0.3rem;
  visibility: hidden;
}

.fila:hover .acciones, .acciones:focus-within { visibility: visible; }

/* `visibility: hidden` esconde pero no libera el sitio: ocultas seguían reservando
   su ancho en cada fila y estrujaban el nombre, que en las columnas del panel se
   quedaba en media palabra. Donde hay ratón se sacan del flujo y aparecen flotando
   sobre el borde de la celda; en táctil se quedan en línea, que ahí no hay hover
   y flotando taparían el texto para siempre. */
@media (hover: hover) {
  .c-nombre { position: relative; }

  .acciones {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0.2rem 0.3rem;
    border-radius: var(--radio);
    background: var(--fondo-elevado);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.4);
  }
}

@media (hover: none) { .acciones { visibility: visible; } }

.accion {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--texto-apagado);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 0 0.3rem;
  background: var(--fondo);
  cursor: pointer;
  line-height: 1.35;
}

.accion:hover { color: var(--acento); border-color: var(--acento); }
.accion:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.fila.estado-doing { background: color-mix(in srgb, var(--acento) 9%, transparent); }
.fila.estado-doing .casilla { color: var(--acento); border-color: var(--acento); }

.kpi-enlace { text-decoration: none; color: inherit; }
.kpi-enlace:hover { border-color: var(--acento); }

/* --- Niveles de job ---------------------------------------------------------- */

.jobs { display: flex; flex-direction: column; gap: 1.2rem; }

/* Cada rol con su color, como en el juego: tanques azul, sanadores verde, DPS rojo. */
.rol-tank { --rol: #7592d6; }
.rol-healer { --rol: #6fbf8b; }
.rol-melee, .rol-ranged, .rol-caster { --rol: #d0655a; }
.rol-limited { --rol: #58b3c6; }
.rol-crafter { --rol: #b08fd8; }
.rol-gatherer { --rol: #d8b45a; }

.grupo-jobs { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.8rem 1rem 1rem; }

.grupo-jobs legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-apagado);
  padding: 0 0.4rem;
}

/* El mismo diamante que las expansiones del lateral, aquí en color de rol. */
.grupo-jobs legend::before {
  content: "";
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--rol, var(--texto-apagado));
  border-radius: 1px;
}

.rejilla-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.45rem; }

.job {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--fondo-hundido);
}

/* Sin nivel, el job duerme en gris; con nivel se enciende con el color de su rol,
   y al tope (100) el remate pasa a oro. */
.job.con-nivel {
  background: var(--fondo-elevado);
  border-color: color-mix(in srgb, var(--rol, var(--borde)) 45%, var(--borde));
}

.job-abrev {
  flex: 0 0 auto;
  width: 2.4rem;
  padding: 0.12rem 0;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--texto-apagado);
  background: color-mix(in srgb, var(--texto-apagado) 12%, transparent);
  border-radius: 4px;
}

.job.con-nivel .job-abrev {
  color: var(--rol, var(--texto));
  background: color-mix(in srgb, var(--rol, var(--texto-apagado)) 16%, transparent);
}

.job-etiqueta { display: contents; cursor: pointer; }
.job-nombre { flex: 1 1 auto; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job:not(.con-nivel) .job-nombre { color: var(--texto-apagado); }

/* El pin del job comparte estilo con el del lateral, pero aquí la fila no es un
   enlace, así que se descubre al pasar por encima de la tarjeta entera. */
.pin-job { margin-left: 0.1rem; }
.job:hover .pin-job, .pin-job:focus-visible, .pin-job.fijada { opacity: 1; }

.job input {
  width: 3.2rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--fondo);
  color: var(--texto);
  font-size: 0.9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.job.con-nivel input { font-weight: 600; }
.job input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.job.tope { border-color: color-mix(in srgb, var(--oro) 55%, var(--borde)); }
.job.tope .job-abrev { color: var(--oro-texto); background: color-mix(in srgb, var(--oro) 18%, transparent); }
.job.tope input { color: var(--oro-texto); font-weight: 700; }

/* --- Filtro de estado de la sección ----------------------------------------- */

.filtros-estado { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.7rem; }

.chip {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo-elevado);
  color: var(--texto-apagado);
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { border-color: var(--acento); color: var(--acento); }

.chip.activo {
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  color: var(--acento);
  font-weight: 600;
}

.vacio {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--texto-apagado);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

.vacio strong { color: var(--hecho); }


/* --- Ficha flotante ------------------------------------------------------------ */

.dialogo-ficha {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--oro) 30%, var(--borde));
  border-radius: var(--radio);
  background: var(--fondo-elevado);
  color: var(--texto);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}

.dialogo-ficha::backdrop { background: rgb(0 0 0 / 0.55); backdrop-filter: blur(2px); }

.ficha { padding: 1.2rem 1.35rem 1.35rem; }

.ficha-cabecera { position: relative; padding-right: 2rem; margin-bottom: 1rem; }
.ficha-cabecera .rotulo { margin-bottom: 0.3rem; }

.ficha-cabecera h2 {
  font-family: var(--fuente-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.ficha-original { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--texto-apagado); }

.ficha-cerrar {
  position: absolute;
  top: -0.3rem;
  right: -0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: var(--radio);
  background: none;
  color: var(--texto-apagado);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ficha-cerrar:hover { background: var(--fondo-hundido); color: var(--texto); }

/* Etiqueta a la izquierda y dato a la derecha: se lee como una ficha de catálogo. */
.ficha-datos {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem 0.9rem;
  margin: 0;
  font-size: 0.88rem;
}

.ficha-datos dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-apagado);
  padding-top: 0.15rem;
}

.ficha-datos dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; align-items: baseline; }
.ficha-datos .zona::before { content: ""; }
.ficha-ubicacion { flex-basis: 100%; color: var(--texto-apagado); font-size: 0.82rem; }
/* De quién es el nivel que pide la entrada: «50 de artesano o recolector». */
.ficha-nivel-de { color: var(--texto-apagado); font-size: 0.82rem; }
/* Cada corriente de campo en su línea: coordenadas y la pista de la wiki. */
.corriente-de-campo { flex-basis: 100%; font-size: 0.82rem; color: var(--texto-apagado); }
.corriente-de-campo .coord { margin-right: 0.35rem; }
/* Requisitos de la ficha: lo cumplido se apaga, lo pendiente es lo que hay que leer. */
.ficha-requisito { font-size: 0.82rem; }
.ficha-requisito.cumplido { color: var(--texto-apagado); }
.ficha-ruta { font-size: 0.82rem; }
.ficha-ruta a { text-decoration: none; color: var(--texto-apagado); }
.ficha-ruta a:hover { color: var(--acento); }
.ficha-flecha { color: var(--oro-texto); opacity: 0.6; }

.ficha-estado { font-weight: 600; }
.ficha-estado.hecha { color: var(--hecho); }
.ficha-estado.haciendo { color: var(--acento); }
.ficha-estado.apartada { color: var(--excluido); }

.ficha-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

/* Las cuatro acciones de la ficha, con el mismo peso. La que refleja el estado actual
   se marca con `activo`, que es información, no jerarquía. */
.boton-ficha {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
}

.boton-ficha:hover { border-color: var(--acento); color: var(--acento); }
.boton-ficha:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.boton-ficha.activo {
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  color: var(--acento);
}

/* --- Sugerencias del buscador ------------------------------------------------ */

.sugerencias {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--fondo-elevado);
  border: 1px solid color-mix(in srgb, var(--oro) 22%, var(--borde));
  border-radius: var(--radio);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  max-height: 24rem;
  overflow-y: auto;
}

.sugerencias li a {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.1rem 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--texto);
}

.sugerencias li a:hover, .sugerencias li a:focus-visible {
  background: var(--fondo-hundido);
  outline: none;
}

.sug-estado { grid-row: span 2; color: var(--texto-apagado); font-size: 0.8rem; }
.sug-estado.estado-done { color: var(--hecho); }
.sug-estado.estado-doing { color: var(--acento); }
.sug-nombre { font-size: 0.92rem; }
.sug-meta { font-size: 0.74rem; color: var(--texto-apagado); }

.sug-todos { border-top: 1px solid var(--borde); margin-top: 0.25rem; padding-top: 0.25rem; }

/* Más específico que «.sugerencias li a»: sin esto hereda su grid y el texto cae
   palabra a palabra dentro de la columna de 1.2rem. */
.sugerencias .sug-todos a { display: block; font-size: 0.8rem; color: var(--acento); padding: 0.35rem 0.55rem; text-decoration: none; }
.sug-vacio { padding: 0.6rem; font-size: 0.85rem; color: var(--texto-apagado); }

/* --- Filtro y migas de pan --------------------------------------------------- */

.filtro-arbol {
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font-size: 0.85rem;
}

.filtro-arbol:focus-visible { outline: 2px solid var(--acento); outline-offset: -1px; }

/* Con el filtro activo el árbol completo estorba: se aparta hasta que se vacía. */
#resultado-filtro:not(:empty) ~ #arbol-completo,
#resultado-filtro:not(:empty) ~ #favoritos { display: none; }

/* --- Favoritos ------------------------------------------------------------------ */

.favoritos {
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--borde);
}

.favoritos > .rotulo { margin: 0 0 0.35rem 0.2rem; }
.lista-favoritos { padding: 0; }

/* Cuando está vacía es solo una pista: no debe pesar como un bloque más. */
.favoritos.vacios { border-bottom-style: dashed; }

.favoritos-pista {
  padding: 0.5rem 0.4rem;
  font-size: 0.76rem;
  color: var(--texto-apagado);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  text-align: center;
}

/* Al pasar algo arrastrado por encima, la caja se enciende. */
.favoritos.soltando {
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  border-radius: var(--radio);
  outline: 1px dashed color-mix(in srgb, var(--acento) 60%, transparent);
  outline-offset: 2px;
}

.favoritos.soltando .favoritos-pista { border-color: var(--acento); color: var(--acento); }

/* Al sacar un favorito de la caja se avisa de que se va a quitar. */
.favoritos.soltando-fuera {
  border-radius: var(--radio);
  outline: 1px dashed color-mix(in srgb, var(--conflicto) 60%, transparent);
  outline-offset: 2px;
}

.favoritos.soltando-fuera .favorito.arrastrando .rama-nombre {
  color: var(--conflicto);
  text-decoration: line-through;
}

.rama.arrastrando { opacity: 0.4; }
/* El navegador enfoca lo que arrastras y dibuja su anillo encima: sobra, porque el
   propio elemento ya se apaga mientras se mueve. */
.rama[draggable]:focus:not(:focus-visible) { outline: none; }

/* El agarre solo aparece al pasar por encima, pero reserva su hueco: si no, la fila
   entera se movería al acercar el ratón. */
.agarre {
  flex: 0 0 auto;
  width: 0.9rem;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--texto-apagado);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.1s;
}

.favorito:hover .agarre { opacity: 0.7; }
.favorito.arrastrando .agarre { cursor: grabbing; }
@media (hover: none) { .agarre { opacity: 0.7; } }

.arbol-plano .rama { margin-bottom: 0.35rem; }
.rama-ruta {
  margin: 0 0 0 0.1rem;
  font-size: 0.7rem;
  color: var(--texto-apagado);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rama-vacio { font-size: 0.82rem; color: var(--texto-apagado); padding: 0.4rem 0.2rem; }

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--texto-apagado);
  margin-bottom: 0.4rem;
}

.migas a { text-decoration: none; color: var(--texto-apagado); }
.migas a:hover { color: var(--acento); }
.migas span[aria-current] { color: var(--oro-texto); }
.migas > *:not(:last-child)::after { content: " ›"; color: var(--oro-texto); opacity: 0.55; margin-left: 0.35rem; }

/* El visto de Lodestone junto al nombre: «esto lo hiciste y no lo has marcado». */
.visto-lodestone {
  flex: 0 0 auto;
  color: var(--hecho);
  font-size: 0.8rem;
  cursor: help;
}

/* --- Atajos de la columna lateral ------------------------------------------------ */

.atajos-lateral { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.9rem 0; }

.atajo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radio);
  font-size: 0.82rem;
  color: var(--texto-apagado);
  text-decoration: none;
}

.atajo:hover { background: var(--fondo-elevado); color: var(--acento); }

.atajo-revisar { color: var(--oro-texto); }

.atajo-cuenta {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--oro) 20%, transparent);
}

/* Contenido que aún no alcanzas: el nivel se enciende, no la fila entera. Teñir la
   línea completa haría ilegible el nombre, que es lo que uno viene a leer, y en una
   sección de job casi todo está por encima de tu nivel. */
.fila.bloqueada .c-nivel { color: var(--conflicto); font-weight: 600; }

/* Ya la hiciste (o la apartaste): el nivel deja de ser un aviso. */
.fila.bloqueada.estado-done .c-nivel,
.fila.bloqueada.estado-excluded .c-nivel { color: var(--texto-apagado); font-weight: inherit; }

/* Nivel tocado a mano que aún no ha pasado por una sincronización. */
.sin-sincronizar { color: var(--oro-texto); font-size: 0.7rem; cursor: help; }

.atajos-lateral .rotulo { margin: 0.5rem 0.5rem 0.1rem; }

/* Los atajos a los gráficos llevan icono y texto a la izquierda; el `space-between` de
   los atajos con contador los separaría a los dos extremos. */
.atajo-grafico { justify-content: flex-start; gap: 0.45rem; }
.atajo-grafico.activo { color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); }
.icono-barras { width: 0.85rem; height: 0.85rem; fill: currentColor; opacity: 0.8; flex: 0 0 auto; }

/* --- Velo de spoilers ------------------------------------------------------------ */

/* Cada palabra que aún no te has cruzado en la historia sale como esta mancha: un
   cuadradito suave, tipo tachón pero sin negro, con la palabra «spoiler» en pequeño y
   el borde discontinuo que dice «esto se pulsa». Pulsarla destapa la fila o la ficha
   en la que está (ver app.js); donde no hay nada que destapar solo señala. */
.spoiler {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px dashed color-mix(in srgb, var(--texto-apagado) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--texto-apagado) 14%, transparent);
  color: var(--texto-apagado);
  font-size: 0.72em;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  vertical-align: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.spoiler:hover {
  color: var(--acento);
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
}

.nombre .spoiler { vertical-align: 0.15em; }
.rama-nombre .spoiler, .sug-nombre .spoiler { font-size: 0.68em; }
h1 .spoiler, .ficha-cabecera h2 .spoiler { font-size: 0.55em; vertical-align: 0.3em; }

/* El aviso bajo la cabecera de la sección o de la búsqueda: cuántas llevan spoilers y
   el enlace para destaparlas todas. Pequeño, que es un dato más, no una alarma. */
.aviso-velo {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--texto-apagado);
}

/* «Destapar» y «tapar» van con las demás acciones de la fila, un punto más a la vista:
   son la única manera de leer lo tapado sin abrir la ficha. */
.accion-spoilers { color: var(--oro-texto); border-color: color-mix(in srgb, var(--oro) 45%, var(--borde)); }
.boton-spoilers { color: var(--oro-texto); }

/* El menú de spoilers reutiliza el embudo de la otra columna: mismo sitio, misma caja. */
.embudo-boton.apagado-velo { color: var(--oro-texto); }
.menu-spoilers { width: 17rem; }
.menu-spoilers-estado { margin: 0 0 0.2rem; font-size: 0.82rem; color: var(--texto-apagado); }
.menu-spoilers .boton-pequeno { margin-top: 0.5rem; width: 100%; }
.menu-spoilers-suelo { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--borde); }
.menu-spoilers-suelo label { display: block; font-size: 0.82rem; color: var(--texto-apagado); margin-bottom: 0.3rem; }
.menu-spoilers-suelo select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font-size: 0.85rem;
}

/* --- Gráfico de niveles por job ------------------------------------------------ */
/* Una columna por job sobre bandas de cinco niveles. Es HTML y CSS: la altura de cada
   barra viene en `--nivel` y el techo del eje en `--tope`, y todo lo demás son `calc()`
   sobre esas dos. El color de cada barra dice en qué expansión va su nivel, y el gris,
   que está sin subir; el que queda por debajo de la barrera lleva una flecha naranja
   sobre la cima, y esa es toda la marca del rezago: ni raya en el gráfico ni color de
   barra. Las barras no llevan el color de su rol —el rojo de los DPS se confundiría con
   el naranja de la flecha— y el rol se dice en la pista, con su diamante. */

.grafico-jobs {
  --alto-grafico: 26rem;
  --ancho-eje: 2.5rem;
  /* Margen derecho para los rótulos de las rayas de referencia: fuera del área, que
     dentro tapaban barras. */
  --ancho-etiquetas: 7.5rem;
  --paso: 5;
  /* El color de cada barra lo pone su expansión (`--exp`, por la clase `exp-…` de la
     columna); este es el de reserva, por si alguna no tuviera tope. */
  --barra: color-mix(in srgb, var(--acento) 80%, var(--fondo));
  --barra-gris: color-mix(in srgb, var(--excluido) 55%, var(--fondo));
  margin: 0 0 1.25rem;
  max-width: var(--ancho-lectura);
}

.resumen-comparativa { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.resumen-comparativa b { color: var(--texto); font-weight: 600; }
.dato-rezago b { color: var(--conflicto); }

/* Debajo del área quedan las siglas de los jobs y, bajo ellas, la franja de categorías;
   las dos cuelgan del área en absoluto, así que el hueco se reserva con el margen. */
.grafico {
  display: grid;
  grid-template-columns: var(--ancho-eje) minmax(0, 1fr);
  margin-bottom: 4.1rem;
}

.eje-y { position: relative; height: var(--alto-grafico); }

.marca-eje {
  position: absolute;
  right: 0.5rem;
  bottom: calc(var(--valor) / var(--tope) * 100%);
  transform: translateY(50%);
  font-size: 0.64rem;
  line-height: 1;
  color: var(--texto-apagado);
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.marca-eje.decena { opacity: 1; }

.area {
  position: relative;
  height: var(--alto-grafico);
  margin-right: var(--ancho-etiquetas);
  border-left: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

/* Bandas de cinco: cada una lleva la raya de su techo, y una de cada dos va sombreada
   para que se lea el tramo sin seguir la línea con el dedo. */
.banda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--desde) / var(--tope) * 100%);
  height: calc(var(--paso) / var(--tope) * 100%);
  border-top: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
  pointer-events: none;
}

.banda:nth-child(even) { background: color-mix(in srgb, var(--texto) 5%, transparent); }

/* Rayas de referencia: el tope de cada expansión, en su color pero tenue, que es
   también donde la barra cambia de color. Asoman un poco por la derecha, hacia sus
   rótulos. Ni la media ni la barrera llevan raya: se dicen con su número en el
   resumen, y la barrera además con la flecha sobre las barras que quedan por debajo. */
.referencia {
  position: absolute;
  left: 0;
  right: -0.3rem;
  bottom: calc(var(--valor) / var(--tope) * 100%);
  border-top: 1px solid color-mix(in srgb, var(--exp, var(--texto-apagado)) 38%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* Los rótulos, en el margen derecho, cada uno a la altura de su raya. */
.etiquetas-referencia {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: var(--ancho-etiquetas);
  pointer-events: none;
}

.etiqueta-referencia {
  position: absolute;
  left: 0.5rem;
  bottom: calc(var(--valor) / var(--tope) * 100%);
  transform: translateY(50%);
  font-size: 0.64rem;
  line-height: 1.2;
  white-space: nowrap;
  color: color-mix(in srgb, var(--exp, var(--texto-apagado)) 65%, var(--texto-apagado));
}

.etiqueta-corta { display: none; }

.columnas {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0 0.3rem;
  list-style: none;
  display: flex;
  align-items: stretch;
  z-index: 2;
}

/* La columna entera es la zona de hover y de foco: la barra sola sería un blanco de un
   par de píxeles para los jobs bajos. */
.columna {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  outline: none;
  cursor: default;
}

.columna:hover, .columna:focus-within { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.columna:focus-visible { box-shadow: inset 0 0 0 2px var(--acento); }

/* Se llama `barra-nivel` y no `barra`: `.barra` ya es la mini barra de progreso del
   lateral, con un margen izquierdo que aquí descentraba la barra bajo su sigla. */
.barra-nivel {
  width: min(55%, 1.15rem);
  height: calc(var(--nivel) / var(--tope) * 100%);
  min-height: 2px;
  background: var(--exp, var(--barra));
  border-radius: 4px 4px 0 0;
  transition: filter 0.12s;
}

.columna:hover .barra-nivel, .columna:focus-within .barra-nivel { filter: brightness(1.18); }
.sin-subir .barra-nivel { background: var(--barra-gris); }
.al-tope .barra-nivel { background: linear-gradient(to top, var(--exp, var(--barra)) 60%, var(--oro)); }

/* El nivel en la cima de cada barra. Son dos docenas de números y se leen: es lo que uno
   viene a mirar, y a nadie le apetece pasar el ratón por veintidós barras. */
.cima {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--nivel) / var(--tope) * 100% + 0.2rem);
  text-align: center;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--texto-apagado);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.al-tope .cima { color: var(--oro-texto); font-weight: 700; }
.sin-subir .cima { color: var(--excluido); opacity: 0.7; }
.columna:hover .cima, .columna:focus-within .cima { color: var(--texto); }

/* La flecha del que queda por debajo de la barrera: en naranja, apuntando a la cima de
   la barra, y el número sube un escalón para dejarle sitio. Es la única marca del rezago:
   el color de la barra ya lo gasta la expansión. En estrecho, donde los números se
   esconden, la flecha se queda. */
.marca-rezago {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nivel) / var(--tope) * 100% + 0.12rem);
  width: 0.62rem;
  height: 0.75rem;
  transform: translateX(-50%);
  fill: var(--conflicto);
  pointer-events: none;
}

.rezagada .cima {
  bottom: calc(var(--nivel) / var(--tope) * 100% + 1.05rem);
  color: var(--conflicto);
  font-weight: 600;
}

/* Bajo el eje, el icono del job y su sigla debajo: en fila no cabían en una columna de
   dos rem y medio. */
.etiqueta {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--texto-apagado);
  white-space: nowrap;
}

/* Iconos del juego (32 px, traídos de la wiki): pequeños y con la esquina suave. */
.icono-job { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; border-radius: 3px; }
.sin-subir .icono-job { opacity: 0.55; filter: saturate(0.4); }

.sin-subir .etiqueta { color: var(--excluido); font-weight: 500; }
.columna:hover .etiqueta, .columna:focus-within .etiqueta { color: var(--texto); }

/* La franja de categorías bajo las siglas: cada grupo ocupa tantas columnas como jobs
   tiene, con la raya en el color de su rol y el nombre debajo. */
.grupos-rol {
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  top: calc(100% + 2.55rem);
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.grupo-rol {
  flex: var(--columnas) 1 0;
  margin: 0 0.15rem;
  padding-top: 0.15rem;
  border-top: 2px solid var(--rol, var(--borde));
  text-align: center;
  font-size: 0.58rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--rol, var(--texto-apagado)) 55%, var(--texto-apagado));
  white-space: nowrap;
}

/* Al pasar por encima se enciende el tramo en el que está la barra, en su mismo color:
   es la respuesta directa a «en qué tramo va». */
.tramo-marca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--tramo) / var(--tope) * 100%);
  height: calc(var(--paso) / var(--tope) * 100%);
  background: color-mix(in srgb, var(--exp, var(--acento)) 14%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--exp, var(--acento)) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--exp, var(--acento)) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

.columna:hover .tramo-marca, .columna:focus-within .tramo-marca { opacity: 1; }

/* La pista. Sale al lado de la columna, hacia arriba en las barras bajas y hacia abajo
   en las altas, y hacia la izquierda en las últimas columnas para no salirse del
   gráfico. El relleno transparente es zona de hover: sin él, al cruzar el hueco hasta la
   caja la columna perdía el ratón y la pista se cerraba antes de llegar al enlace. */
.pista {
  display: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  width: 17.5rem;
  padding: 0 0 0 0.9rem;
  cursor: auto;
}

.columna:hover .pista, .columna:focus-within .pista { display: block; }
.pista-abajo .pista { top: calc((var(--tope) - var(--nivel)) / var(--tope) * 100%); }
.pista-arriba .pista { bottom: calc(var(--nivel) / var(--tope) * 100%); padding-bottom: 0.9rem; }
.columna:nth-last-child(-n+6) .pista { left: auto; right: 50%; padding: 0 0.9rem 0 0; }
.columna:nth-last-child(-n+6).pista-arriba .pista { padding-bottom: 0.9rem; }

.pista-caja {
  padding: 0.6rem 0.75rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--oro) 30%, var(--borde));
  border-radius: var(--radio);
  background: var(--fondo-elevado);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.45);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--texto);
}

.pista-titulo { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; }
.pista-titulo .icono-job { width: 1.15rem; height: 1.15rem; }

.pista-abrev {
  flex: 0 0 auto;
  padding: 0.05rem 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  border-radius: 4px;
  color: var(--rol, var(--texto));
  background: color-mix(in srgb, var(--rol, var(--texto-apagado)) 16%, transparent);
}

.pista-nombre { font-weight: 600; }

/* El rol con su diamante, como en la página de niveles. */
.pista-rol {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--texto-apagado);
  white-space: nowrap;
}

.pista-rol::before {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--rol, var(--texto-apagado));
  border-radius: 1px;
}

/* Manda el número: es lo que se venía a leer. */
.pista-nivel { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.4rem; }
.pista-nivel strong { font-size: 1.35rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.pista-nivel span { color: var(--texto-apagado); }
.pista-tope { color: var(--oro-texto); }
/* La expansión, a la derecha y en su color: es lo que dice el color de la barra. */
.pista-nivel .pista-era { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--exp, var(--texto-apagado)); white-space: nowrap; }
.rezagada .pista-nivel strong { color: var(--conflicto); }
.al-tope .pista-nivel strong { color: var(--oro-texto); }
.sin-subir .pista-nivel strong { font-size: 1rem; color: var(--texto-apagado); }

.pista-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.7rem;
  margin: 0;
  font-size: 0.75rem;
}

.pista-datos dt { color: var(--texto-apagado); }
.pista-datos dd { margin: 0; font-variant-numeric: tabular-nums; }

.pista-aviso { margin: 0.45rem 0 0; font-size: 0.72rem; color: var(--conflicto); }
.pista-nota { margin: 0.45rem 0 0; font-size: 0.72rem; color: var(--oro-texto); }
.pista-enlace { display: inline-block; margin-top: 0.5rem; font-size: 0.75rem; text-decoration: none; }
.pista-enlace:hover { text-decoration: underline; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: var(--texto-apagado);
}

.leyenda-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.muestra {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--barra);
}

/* Las expansiones de la leyenda, cada una con su cuadradito y su nombre en su color; la
   flecha es la misma que va sobre las barras. */
.leyenda-eras { flex-wrap: wrap; row-gap: 0.15rem; }
.leyenda-era { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--exp, var(--texto-apagado)); }
.leyenda-era .muestra { background: var(--exp, var(--barra)); }
.muestra-gris { background: var(--barra-gris); }
.muestra-rezago { flex: 0 0 auto; width: 0.62rem; height: 0.75rem; fill: var(--conflicto); }
.muestra-expansion { width: 1rem; height: 0; border-radius: 0; border-top: 1px solid color-mix(in srgb, var(--texto-apagado) 70%, transparent); background: none; }

/* La misma información en tabla, plegada: para leerla de una vez o sin ratón. */
.tabla-jobs { max-width: var(--ancho-lectura); margin: 0 0 1.5rem; }
.tabla-jobs summary { cursor: pointer; font-size: 0.82rem; color: var(--texto-apagado); }
.tabla-jobs summary:hover { color: var(--acento); }
.tabla-comparativa { margin-top: 0.6rem; font-size: 0.85rem; }
.tabla-comparativa .numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-comparativa .tabla-abrev { display: inline-block; width: 2.6rem; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--texto-apagado); }
.tabla-comparativa .icono-job { width: 1rem; height: 1rem; vertical-align: -0.2rem; margin-right: 0.35rem; }
.tabla-comparativa .tabla-era { font-weight: 600; color: var(--exp, var(--texto-apagado)); }
.tabla-comparativa tr.rezagada td { color: var(--conflicto); }
.tabla-comparativa tr.sin-subir td { color: var(--texto-apagado); }

/* En estrecho las siglas van en vertical y los números de la cima solo salen en la barra
   que se está mirando: veintidós columnas en veinte rem no dan para más. */
@media (max-width: 40rem) {
  .grafico-jobs { --alto-grafico: 20rem; --ancho-eje: 2rem; --ancho-etiquetas: 3.4rem; }
  .etiqueta-referencia { font-size: 0.58rem; left: 0.35rem; }
  .grafico { margin-bottom: 3.6rem; }
  .etiqueta { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 0.3rem; left: 50%; right: auto; translate: -50% 0; }
  .etiqueta .icono-job { display: none; }
  .grupos-rol { top: calc(100% + 2.2rem); }
  .grupo-rol-nombre { display: none; }
  /* En estrecho el rótulo largo no cabe: sigla de la expansión y «Media» a secas. */
  .etiqueta-larga { display: none; }
  .etiqueta-corta { display: inline; }
  .cima { display: none; }
  .columna:hover .cima, .columna:focus-within .cima { display: block; }
  /* En táctil no hay «al lado» que valga: la pista es una hoja abajo del todo. La lista
     de selectores repite los de escritorio para ganarles en especificidad. */
  .columna .pista,
  .columna.pista-abajo .pista,
  .columna.pista-arriba .pista,
  .columna:nth-last-child(-n+6) .pista,
  .columna:nth-last-child(-n+6).pista-arriba .pista {
    position: fixed;
    inset: auto 0.75rem 0.75rem;
    width: auto;
    padding: 0;
  }
  .pista-caja { box-shadow: 0 -8px 30px rgb(0 0 0 / 0.5); }
}