/* 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;
  /* El amarillo de «en marcha»: se lleva casi todas las barras, así que es apagado a
     propósito. El tercer estado, «en tu tope», es ese mismo amarillo desvaído hacia el
     gris de lo excluido —más gris que amarillo, un tercio largo de tinte—: ver
     `.barra-hecho.al-dia`. Sale de mezclar, no de un color nuevo, para que siga los dos
     temas sin escribirlo tres veces. Por debajo de un cuarto ya no se lee amarillo. */
  --progreso: #c9a13f;
  --progreso-tope: color-mix(in srgb, var(--progreso) 35%, var(--excluido));
  --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;
    --progreso: #9a7418;
    --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;
  --progreso: #9a7418;
  --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; }

/* El filtro global de expansiones: el mismo embudo de siempre, pero vestido como los
   botones de la cabecera (recuadro de 2rem, como el tema). Cuando está filtrando se
   dora —el color de «ajuste activo», el de los spoilers— y cuelga la cuenta de
   expansiones a la vista, para que no se olvide encendido sin enterarse. */
.embudo-cabecera .embudo-boton {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
}

.embudo-cabecera .embudo-boton:hover { color: var(--acento); border-color: var(--acento); }

/* Seis expansiones caben de sobra, así que el tope de 22rem —que es para el embudo de
   treinta casillas— aquí solo escondía a Dawntrail detrás de un scroll. Pero los
   pliegues de parches sí pueden estirar el menú por debajo de la pantalla, y el menú
   cuelga de una cabecera pegada arriba: de ahí no se baja con la rueda. Así que el tope
   es la pantalla misma, y quien despliegue tres expansiones tendrá scroll en la lista. */
.embudo-cabecera .embudo-menu { max-height: calc(100vh - 4.5rem); }
.embudo-cabecera .embudo-boton.filtrando { color: var(--oro-texto); border-color: color-mix(in srgb, var(--oro) 45%, var(--borde)); }

.filtro-cuenta {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--fondo);
  background: var(--oro-texto);
}

.menu-filtro-estado { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--texto-apagado); }

/* 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: versalita y aire entre bloques.

   El rótulo era dorado y ha dejado de serlo: con las barras de progreso en amarillo
   justo debajo, dos tonos cálidos casi iguales en la misma línea competían entre sí y
   el color dejaba de significar nada. La mayúscula, el peso y el interletraje ya dicen
   que es un grupo; el color se reserva para lo que informa —el estado de la barra, la
   era del parche, el azul de lo activo—. */
#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(--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;
}


.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; }

/* El total entre paréntesis de «4/4 (15)». Va apagado y en segundo plano a propósito:
   la cifra que se lee es lo hecho sobre lo alcanzable, y el total es el contexto de
   cuánto queda ahí esperando nivel. */
.cifra-total { margin-left: 0.3rem; opacity: 0.5; font-weight: 400; }

/* 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 cifra sigue entera —fracción
   y total—, que es justo lo que se va a mirar en una cadena de job. */
.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;
}

/* Tres estados y tres colores, en todas las barras de progreso:

   - amarillo, lo normal: vas por la mitad y queda trabajo;
   - amarillo apagado, «en tu tope»: hecho todo lo que alcanzas y el resto espera nivel.
     No es un estado malo —no hay nada que ir a hacer—, así que no se pinta en rojo: es
     el mismo amarillo de «en marcha» pero tirando a gris, la barra en pausa;
   - verde, terminado de verdad.

   El estado manda sobre el color de la era, que es lo que teñía estas barras en el
   lateral: en una barra de progreso importa más cómo vas que de qué expansión es la
   rama, y la era ya la dicen el sitio, el diamante y la etiqueta de parche de cada
   fila. */
.barra-hecho { display: block; height: 100%; background: var(--progreso); }
.barra-hecho.al-dia { background: var(--progreso-tope); }
.barra-hecho.completa { 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));
}

.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; }

/* Las barras de historia van partidas en trozos —la de la era por parches, la de toda
   la historia por expansiones—: cada trozo ocupa lo que pesa en misiones y se pinta
   en el color de su era, lo hecho a pleno y lo que queda del mismo color pero
   apagado. Los separadores son el hueco entre trozos, del color del fondo. Gana al
   degradado éter→oro de los KPI: aquí el color lo pone la era.

   Los trozos son `flex` y no `inline-block` para que el hueco lo ponga `gap` y no el
   espacio en blanco de la plantilla; y `min-width: 0` para que el reparto por
   porcentaje se respete aunque el hueco se coma parte del ancho. */
.kpi .barra-historia { display: flex; gap: 2px; background: transparent; height: 4px; }
.kpi .barra-historia .trozo {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--exp, var(--texto-apagado)) 28%, transparent);
}
.kpi .barra-historia .trozo-hecho { display: block; height: 100%; background: var(--exp, var(--acento)); }
/* Un trozo terminado no necesita brillar más que el que está en marcha: se queda en
   su color, que la barra llena ya lo dice. Al que se va se le sube un punto para que
   se vea dónde está el frente. */
.kpi .barra-historia .trozo.en-curso .trozo-hecho { filter: brightness(1.12); }

/* --- 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 corte de parches de una expansión: sangrado y más menudo, que es un ajuste fino y
   no otra lista al mismo nivel. Con scroll propio: Heavensward trae quince parches y el
   desplegable de la cabecera no puede crecer con ellos. */
.embudo-parches {
  margin: 0.1rem 0 0.3rem 1.4rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--borde);
  max-height: 13rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.embudo-parche { font-size: 0.78rem; padding: 0.15rem 0.2rem; }

/* 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; }

/* Y de la línea de cada expansión, el pliegue con sus parches. El rótulo no es una
   acción como «Elegir clases» sino el estado —«Entera», «Hasta 3.2»—, así que va
   apagado y solo se enciende al pasar por encima; con seis expansiones, seis líneas
   de acento harían un menú a gritos. Los parches ya vienen sangrados por el pliegue. */
.embudo-parches-rama { margin: 0.1rem 0 0.3rem 1.4rem; }
.embudo-parches-rama > summary { font-size: 0.72rem; color: var(--texto-apagado); }
.embudo-parches-rama > summary:hover { color: var(--acento); }
.embudo-parches-rama .embudo-parches { margin: 0; }
.embudo-parches-rama .embudo-parche { font-size: 0.78rem; }

@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: el fondo, la
   barra del margen y el nombre en negrita son toda la señal. Llevaba además una
   pastilla «SIGUIENTE» y se pidió quitarla —el realce ya lo dice sin gastar texto—. */
.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;
}

/* --- 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; }
/* Todo lo que acompaña al nombre —marca, nivel, tipo, dónde y visto— va centrado a la
   altura de la fila entera: en las filas con nota (dos líneas) quedaba colgado de la
   primera línea, con todo el hueco de la nota debajo. Solo la celda del nombre sigue
   en línea base, que es la que trae las dos líneas. Las acciones flotantes ya se
   centran solas (top 50% sobre la celda). */
.tabla-entradas .c-marca,
.tabla-entradas .c-nivel,
.tabla-entradas .c-tipo,
.tabla-entradas .c-donde,
.tabla-entradas .c-verif { vertical-align: middle; }
.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. */
/* Bloque a secas: como único contenido de una celda centrada, el navegador la coloca
   a (alto de fila − alto de caja) / 2, sin línea base ni métricas de fuente por medio
   — la casilla vacía no tiene línea base y con el ✔ tendría otra distinta. */
.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;
}

.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; }

/* El parche de origen, pegado al nombre. No encoge: dos o cuatro caracteres que,
   si faltan, dejan de contar justo lo que venían a contar. */
.parche {
  font-size: 0.7rem;
  color: var(--exp, var(--texto-apagado));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
  cursor: default;
}

/* Los colores de era se eligieron para fondo oscuro y como relleno de un diamante de
   6px. Puestos en texto de 0.7rem sobre el pergamino del tema claro, el lavanda de
   Endwalker y el lavanda-azul de Heavensward se pierden: aquí —y solo aquí— se acercan
   a la tinta para que se lean. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) .parche { color: color-mix(in srgb, var(--exp, var(--texto-apagado)) 58%, var(--texto)); }
}
:root[data-tema="claro"] .parche { color: color-mix(in srgb, var(--exp, var(--texto-apagado)) 58%, var(--texto)); }

.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; }

/* Qué abre una misión lo dice el icono del propio juego —la mazmorra, el trial, la
   corriente etérea— y no su rótulo escrito: ese prefijo era la mitad del texto de la
   línea, y en la tabla se comía el nombre de lo desbloqueado antes de que llegara el
   ellipsis. El nombre de la clase sigue en el `title` y en el `alt` (ver
   `catalog/iconos.py`).

   16 px sobre una línea de 0.72rem: a 14 los del menú del juego (un disco de trazo fino
   dentro de un cuadro) se leían como una mancha roja. El PNG viene ya reducido a 48 px
   y enfocado, que reducir de 80 a 16 en el navegador los empastaba igual. La esquina
   redondeada es para que el cuadro se lea como una pastilla y no como un borde cortado.
   Alineado por el texto y no por la caja: `middle` lo dejaba flotando sobre las
   minúsculas. */
.icono-clase {
  vertical-align: -0.3em;
  margin-right: 0.2rem;
  border-radius: 3px;
}

.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. */

/* 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; }

/* «Excluir»/«recuperar» de un bloque: como las acciones de fila, aparecen al pasar por
   el título (en táctil, siempre), que veinte cabeceras con botón fijo eran ruido. */
.titulo-bloque .accion { visibility: hidden; flex: none; }
.titulo-bloque:hover .accion, .titulo-bloque .accion:focus-visible { visibility: visible; }
@media (hover: none) { .titulo-bloque .accion { visibility: visible; } }

/* La misma pareja a la altura de toda la sección, bajo los chips de filtro. */
.acciones-seccion { margin: 0.5rem 0 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.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%; }

  /* Con la cabecera envuelta el botón del filtro queda a la izquierda: el menú,
     anclado a su derecha como en escritorio, se salía de la pantalla por ese lado. */
  .embudo-cabecera .embudo-menu { left: 0; right: auto; }
  .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; }

/* La otra puerta: tienes el nivel pero te falta historia. Del oro de los avisos y no del
   rojo del nivel, que es otra cosa y grita más; pequeño y pegado al nombre, porque lo
   que dice de verdad va en su title. */
.candado {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--oro-texto);
  cursor: help;
}
.candado svg { width: 0.62rem; height: 0.75rem; fill: currentColor; opacity: 0.9; }

/* 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); }
}