/* Fuentes locales (SIL OFL, ver fonts/): sin pedidos a Google. Subset latin; Figtree es variable 400-700 */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-latin.woff2) format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin.woff2) format("woff2"); }

:root {
  --font-display: "Marcellus", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --r-sm: 6px;
  --r-lg: 14px;
}

/* Asmodian: noche del Abyss */
:root[data-faction="asmodian"] {
  --bg: #17152a;
  --bg-deep: #100e1f;
  --surface: #211e38;
  --surface-2: #2b2747;
  --line: #3a355c;
  --ink: #e9e5f5;
  --ink-soft: #a9a3c6;
  --aether: #8fd6e3;
  --gold: #d9ae5c;
  --danger: #e0707a;
  --ring-track: #2e2a4c;
  color-scheme: dark;
}

/* Elyos: cielo de Atreia */
:root[data-faction="elyos"] {
  --bg: #bcc6cd;
  --bg-deep: #afbac2;
  --surface: #ccd4da;
  --surface-2: #c1cad1;
  --line: #9aaab5;
  --ink: #1b2a36;
  --ink-soft: #3e4e5b;
  --aether: #0b525e;
  --gold: #6b4b0c;
  --danger: #8c2833;
  --ring-track: #a8b5be;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 16px 48px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--aether); outline-offset: 2px; }

.muted { color: var(--ink-soft); }

/* ---------- Top bar ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 0 8px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 1.5rem; letter-spacing: .02em; }
.brand-mark { width: 30px; height: 30px; fill: var(--gold); }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.faction, .seg {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px;
}
.faction button, .seg button {
  border: 0; background: none; padding: 5px 14px; border-radius: 999px; color: var(--ink-soft);
}
.faction button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.langs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-weight: 600; font-size: .85rem; }
.langs button[aria-pressed="false"] .flag { opacity: .55; }
.flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
/* Estrella de GitHub: discreta, se ilumina al pasar el mouse */
.star {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.star svg { width: 15px; height: 15px; fill: currentColor; }
.star:hover, .star:focus-visible { color: var(--gold); border-color: var(--gold); }
.star span:empty { display: none; }
.star-label + span { padding-left: 7px; border-left: 1px solid var(--line); }

/* ---------- Reset rings (el elemento protagonista) ---------- */
.clocks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 24px;
}
.clock {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px;
  padding: 18px 20px;
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--aether) 14%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.clock.weekly {
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%),
    var(--surface);
}
.ring { width: 112px; height: 112px; }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: var(--ring-track); }
.ring .arc { stroke: var(--aether); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.clock.weekly .ring .arc { stroke: var(--gold); }
.ring .tick { stroke: var(--ring-track); stroke-width: 2; }
.clock h2 { font-size: 1.15rem; color: var(--ink-soft); }
.countdown {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 6px;
}
.countdown small { font-size: .45em; color: var(--ink-soft); margin-left: 2px; margin-right: 8px; }
.clock-meta { font-size: .88rem; color: var(--ink-soft); }
.clock-meta b { color: var(--ink); font-weight: 600; }
.clock-edit {
  position: absolute; top: 10px; right: 10px;
  border: 1px solid transparent; background: none; border-radius: var(--r-sm);
  padding: 4px 8px; font-size: .85rem; color: var(--ink-soft);
}
.clock-edit:hover { border-color: var(--line); color: var(--ink); }

/* ---------- Roster chips ---------- */
.roster { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface);
  padding: 6px 14px 6px 6px; border-radius: 999px;
}
.chip[aria-current="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.chip .sigil {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .95rem;
  background: var(--surface-2); color: var(--aether);
}
.chip.main .sigil { color: var(--gold); }
.chip .who { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.chip .who span { font-size: .75rem; color: var(--ink-soft); }
.chip.add { padding: 6px 14px; border-style: dashed; color: var(--ink-soft); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs button {
  border: 0; background: none; padding: 10px 14px; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- Checklist ---------- */
/* Cada período tiene su color: diarias = aether, semanales = oro */
.daily-list { --accent: var(--aether); }
.weekly-list { --accent: var(--gold); }
.sigil {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-size: .95rem;
  background: var(--surface-2); color: var(--aether);
}
.sigil.main { color: var(--gold); }

.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bar { height: 4px; background: var(--ring-track); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent, var(--aether)); transition: width .4s ease; }

/* Cabecera del personaje: identidad + resumen de diarias y semanales */
.char-head {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
.char-head > * { min-width: 0; }
.char-id, .sum-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px;
}
.char-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.char-id > div { flex: 1; min-width: 0; }
.char-id h2 { font-size: 1.6rem; line-height: 1.1; overflow-wrap: anywhere; }
.char-id .muted { font-size: .85rem; }
.char-id .sigil { width: 44px; height: 44px; font-size: 1.4rem; }
.sum-tile { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; border-top: 3px solid var(--accent); }
.sum-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.sum-num { grid-row: span 2; font-family: var(--font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sum-num small { font-size: .5em; color: var(--ink-soft); }
.sum-sub { font-size: .82rem; color: var(--ink-soft); }
.sum-tile .bar { grid-column: 1 / -1; margin-top: 8px; }

/* Tablero de cada período: panel con cabecera de color */
.board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.board-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 12px;
  padding: 14px 18px 12px; border-top: 3px solid var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  border-bottom: 1px solid var(--line);
}
.board-head h2 { font-size: 1.45rem; color: var(--accent); }
.board-count { font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.board-head .bar { grid-column: 1 / -1; }
.grp + .grp { border-top: 1px solid var(--line); }
.grp-head {
  padding: 8px 18px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); background: var(--bg-deep);
}
.grp.shared .grp-head { color: var(--gold); }

.task {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center;
  padding: 11px 18px 11px 15px; border-left: 3px solid transparent;
}
.task + .task { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.task:nth-child(odd) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.task:hover { background: var(--surface-2); }
.task.part { border-left-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.task.done { border-left-color: var(--accent); }
.t-main { min-width: 0; }
.task .t-name { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task.done .t-name { color: var(--ink-soft); }
.task.done .t-label { text-decoration: line-through; text-decoration-color: var(--line); }
.task .t-desc { font-size: .83rem; color: var(--ink-soft); max-width: 62ch; margin-top: 2px; }
.task.done .t-desc { opacity: .7; }
.t-count {
  min-width: 3.4em; text-align: center; padding: 2px 6px; border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bg-deep); border: 1px solid var(--line); color: var(--ink-soft);
}
.task.part .t-count { color: var(--ink); }
.task.done .t-count { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* ---------- Roster (tabla) ---------- */
.roster-table { font-size: .9rem; }
.roster-table th, .roster-table td { padding: 8px 12px; }
.roster-table thead th { vertical-align: bottom; }
.panel .matrix th:first-child, .board .matrix th:first-child, .board .matrix td:first-child { background: var(--surface); }
.roster-table .task-col { text-align: left; white-space: normal; min-width: 180px; font-weight: 500; }
.roster-table thead .task-col { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; }
.col-char {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; padding: 4px 6px; border-radius: var(--r-sm); color: var(--ink);
}
.col-char:hover { background: var(--surface-2); }
.col-char > span { display: flex; flex-direction: column; font-weight: 600; font-size: .88rem; line-height: 1.2; }
.col-char small { font-weight: 400; font-size: .72rem; color: var(--ink-soft); }
.roster-table .cur { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.roster-table thead .cur .col-char > span { color: var(--accent); }
.roster-table tbody tr:nth-child(even) td:not(.cur) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.roster-table tbody tr:nth-child(even) td.task-col { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.prog-row td { background: var(--bg-deep) !important; vertical-align: middle; }
.prog-row td.task-col { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.prog-row b { font-variant-numeric: tabular-nums; font-size: .85rem; }
.prog-row .bar { margin: 4px auto 0; max-width: 90px; }
.cell {
  display: inline-grid; place-items: center; min-width: 3.4em; height: 26px; padding: 0 8px; vertical-align: middle;
  border-radius: var(--r-sm); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.cell.part { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cell.full { color: var(--bg-deep); background: var(--accent); border-color: var(--accent); }
.cell.na { border-color: transparent; color: var(--line); font-weight: 400; }
.grp-row td {
  text-align: left !important; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gold); background: var(--bg-deep) !important; padding: 7px 12px;
}
.shared-row td:last-child .cell { min-width: 8em; }
.badge {
  font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none;
}
.badge.shared { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
/* inline-block: no hereda el tachado de la tarea hecha (justo ahí importa cuánto falta) */
.badge.reset { display: inline-block; color: var(--aether); border-color: color-mix(in srgb, var(--aether) 50%, transparent); font-weight: 500; }
.badge.reset b { font-variant-numeric: tabular-nums; }
.t-ctrl { display: flex; align-items: center; gap: 6px; }

/* Cargas: una piedra por uso */
.pips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 190px; }
.pip {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
}
.pip.on { background: var(--accent, var(--aether)); border-color: var(--accent, var(--aether)); }
.pip.single { width: 24px; height: 24px; border-radius: var(--r-sm); position: relative; }
.pip.single.on::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
.stepper button { border: 0; background: none; width: 30px; height: 30px; }
.stepper output { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }
.icon-btn {
  border: 0; background: none; color: var(--ink-soft); padding: 4px 6px; border-radius: var(--r-sm); font-size: .8rem;
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.list-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Generic ---------- */
.btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  padding: 8px 14px; font-weight: 500;
}
.btn:hover { border-color: var(--ink-soft); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--bg-deep); font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: .85rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.stack > * + * { margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

label.field { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--ink-soft); }
input[type="text"], input[type="number"], input[type="date"], input:not([type]), select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; color: var(--ink);
}
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row > .field { flex: 1 1 140px; }

.empty { padding: 40px 20px; text-align: center; }
.empty p { max-width: 44ch; margin: 8px auto 16px; color: var(--ink-soft); }

/* Overview table */
.table-wrap { overflow-x: auto; }
table.matrix { border-collapse: collapse; width: 100%; font-size: .9rem; }
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg); }
.matrix thead th { font-weight: 600; color: var(--ink-soft); font-size: .8rem; }
.matrix td.full { color: var(--aether); font-weight: 600; }
.matrix td.part { color: var(--gold); }

/* Progress */
.cp-now { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 90px; display: block; margin-top: 12px; }
.spark path.line { fill: none; stroke: var(--aether); stroke-width: 2; }
.spark path.area { fill: color-mix(in srgb, var(--aether) 14%, transparent); stroke: none; }
.spark line.gate { stroke: var(--gold); stroke-dasharray: 3 4; stroke-width: 1; }
.gates { list-style: none; padding: 0; margin: 12px 0 0; font-size: .9rem; }
.gates li { display: flex; gap: 10px; padding: 4px 0; }
.gates li b { font-variant-numeric: tabular-nums; min-width: 3.5em; }
.gates li.reached { color: var(--ink-soft); }
.gates li.reached b { color: var(--aether); }
.ms-group h3 { margin-bottom: 6px; }
.check { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--aether); }
.goal { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.goal span { flex: 1; }
.goal.done span { text-decoration: line-through; color: var(--ink-soft); }

/* Tips */
.tips { columns: 2 320px; column-gap: 20px; }
.tip { break-inside: avoid; margin-bottom: 20px; }
.tip ul { margin: 8px 0 0; padding-left: 18px; }
.tip li { margin-bottom: 6px; max-width: 60ch; }
.tip li::marker { color: var(--gold); }

/* Dialog */
dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  padding: 24px; width: min(460px, calc(100vw - 32px));
}
dialog::backdrop { background: rgb(8 6 20 / .6); }
dialog h2 { margin-bottom: 16px; font-size: 1.4rem; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.hint { font-size: .82rem; color: var(--ink-soft); margin: 4px 0 0; }

.foot { margin-top: 48px; font-size: .82rem; color: var(--ink-soft); }

@media (max-width: 760px) {
  .clocks, .lists, .grid2 { grid-template-columns: 1fr; }
  .char-head { grid-template-columns: 1fr 1fr; }
  .char-id { grid-column: 1 / -1; }
  .ring { width: 84px; height: 84px; }
  .clock { gap: 14px; padding: 16px; }
  .pips { max-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Evita desbordes horizontales en grids */
.lists > *, .grid2 > *, .clock > div { min-width: 0; }
.clock-meta { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .top { padding-top: 14px; }
  .brand h1 { font-size: 1.25rem; }
  .top-actions { gap: 6px; }
  .faction button { padding: 5px 10px; }
  .langs button { padding: 5px 7px; }
  .star { padding: 6px 8px; }
  .star-label { display: none; }
  .star-label + span { padding-left: 0; border-left: 0; }
  .task { grid-template-columns: 1fr auto; }
  .t-ctrl { grid-column: 1 / -1; }
  .task { padding-inline: 12px; }
  .grp-head, .board-head { padding-inline: 12px; }
  .t-ctrl { justify-content: space-between; }
  .pips { justify-content: flex-start; max-width: none; }
  .clock-edit { top: 6px; right: 6px; }
  .tasks-table th, .tasks-table td { padding-inline: 5px; }
  .tasks-table input[type="number"] { width: 52px !important; }
}
.tasks-table td:nth-child(2) { text-align: left; white-space: normal; }

/* Traspasos */
.kinah-table td:first-child { white-space: nowrap; }
.kinah-table input.amt { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.kinah-table input.amt:invalid { border-color: var(--danger); }
.k-total { color: var(--gold); font-variant-numeric: tabular-nums; }
.xfer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.xfer-grid > * { min-width: 0; }
.xfer h3 { margin-bottom: 4px; }
.xfer.worth h3 { color: var(--aether); }
.xfer.no h3 { color: var(--danger); }
.xfer-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.xfer-item:last-child { border-bottom: 0; }
.xfer-item .t-desc { font-size: .85rem; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 900px) { .xfer-grid { grid-template-columns: 1fr; } }
.panel .matrix th:first-child, .panel .matrix td:first-child { background: var(--surface); }
.badge { white-space: nowrap; }

/* Progresión */
.il-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px 28px; align-items: center; margin-bottom: 20px;
}
.il-now h3 { font-size: 1rem; color: var(--ink-soft); }
.il-sub { margin: 4px 0 0; font-size: .85rem; }
.il-next { margin: 0 0 22px; font-size: .92rem; color: var(--ink-soft); }
.il-next b { color: var(--ink); font-weight: 600; }
.il-track { position: relative; height: 8px; background: var(--ring-track); border-radius: 4px; margin: 0 14px 26px 6px; }
.il-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--aether) 55%, transparent), var(--aether)); border-radius: 4px; transition: width .6s ease; }
.il-gate { position: absolute; top: -5px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.il-gate i { width: 3px; height: 18px; border-radius: 2px; background: var(--line); }
.il-gate.reached i { background: var(--gold); }
.il-gate b { font-size: .72rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.il-gate.reached b { color: var(--gold); }
.il-form { display: flex; gap: 8px; }
.il-form input { flex: 1; min-width: 0; }
.il-hero .il-form input { width: 170px; }
.il-history { grid-column: 1 / -1; }
.prog-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.prog-grid > * { min-width: 0; }

.stages { margin-top: 12px; }
.stage { border-top: 1px solid var(--line); }
.stage summary {
  display: grid; grid-template-columns: 7.5em 1fr auto; gap: 12px; align-items: baseline;
  padding: 12px 0; cursor: pointer; list-style: none;
}
.stage summary::-webkit-details-marker { display: none; }
.stage-range { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.stage-title { font-weight: 600; }
.stage-count { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stage.current .stage-range { color: var(--aether); }
.stage.past .stage-title { color: var(--ink-soft); }
.badge.here { color: var(--aether); border-color: color-mix(in srgb, var(--aether) 50%, transparent); }
.check.step { align-items: flex-start; padding: 6px 0 6px calc(7.5em + 12px); }
.check.step input { margin-top: 3px; flex: none; }
.stage[open] { padding-bottom: 10px; }
.pro-tips { margin: 10px 0 0; padding-left: 18px; }
.pro-tips li { margin-bottom: 8px; max-width: 70ch; }
.pro-tips li::marker { color: var(--gold); }

@media (max-width: 900px) {
  .il-hero { grid-template-columns: 1fr; }
  .il-hero .il-form input { width: auto; }
  .prog-grid { grid-template-columns: 1fr; }
  .stage summary { grid-template-columns: 1fr auto; }
  .stage-range { grid-column: 1 / -1; }
  .check.step { padding-left: 0; }
}
.il-next { margin-bottom: 30px; }
.il-track { margin-bottom: 30px; }
.il-gate b { position: absolute; top: 24px; white-space: nowrap; }
.il-gate.up b { top: auto; bottom: 24px; }
.il-hero .il-form input { width: 150px; }
.il-hero .il-form input { width: 175px; }

/* Crafteo */
.craft-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.craft-grid > * { min-width: 0; }
.rc-filters { margin: 12px 0 6px; }
.rc-filters input[type="search"] { width: 100%; }
.rc-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rc-row:last-child { border-bottom: 0; }
.rc-main { display: flex; flex-direction: column; min-width: 0; }
.rc-name { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.rc-name:hover { text-decoration: underline; }
.rc-meta { font-size: .8rem; color: var(--ink-soft); }
.ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); display: inline-block; flex: none; object-fit: cover; }
.rc-rec h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; margin: 18px 0 4px; }
.rc-mats td:first-child { white-space: normal; }
.rc-mat { display: flex; align-items: center; gap: 10px; }
.rc-mat .ic { width: 28px; height: 28px; }
.rc-mat a { text-decoration: none; }
.rc-mat a:hover { text-decoration: underline; }
.rc-mats input.amt { width: 84px; text-align: right; }
.rc-mats tr.ok td { color: var(--ink-soft); }
.rc-done { color: var(--aether); font-weight: 600; margin: 6px 0; }

/* Color por grado del item */
.g11 { color: var(--ink); }
.g21 { color: #4fae63; }
.g31 { color: #4b8fe0; }
.g41 { color: var(--gold); }
:root[data-faction="elyos"] .g21 { color: #2f7f43; }
:root[data-faction="elyos"] .g31 { color: #2462b0; }

@media (max-width: 900px) { .craft-grid { grid-template-columns: 1fr; } }
.rc-filters > .field:first-child { flex-basis: 100%; }
/* Las etapas se abren solo desde el rango de Item Level */
.stage summary { cursor: default; }
.stage-range { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.stage-range::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; }
.stage[open] .stage-range::before { transform: rotate(90deg); }
.stage-range:hover { color: var(--ink); }
.stage summary:focus-visible { outline: none; }
.stage summary:focus-visible .stage-range { outline: 2px solid var(--aether); outline-offset: 2px; border-radius: 2px; }
.stage summary { grid-template-columns: 8.5em 1fr auto; }
.check.step { padding-left: calc(8.5em + 12px); }
@media (max-width: 900px) { .stage summary { grid-template-columns: 1fr auto; } .check.step { padding-left: 0; } }