/* Calculadora de talentos (/talentos) */

.tc-wrap { max-width: 1240px; margin: 0 auto; padding: 16px 16px 60px; }
.tc-crumb { margin: 4px 0; font-size: .85rem; color: var(--text-dim); }
.tc-crumb a { color: var(--text-dim); }
.tc-title { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; margin: 6px 0 14px; }
.tc-title img { border-radius: 8px; border: 1px solid var(--border); }
.tc-title small { font-size: .55em; color: var(--text-dim); font-weight: 600; margin-left: 6px; }

/* Hub */
.tc-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.tc-class { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--cc); border-radius: 14px; padding: 12px; }
.tc-class h2 { margin: 0 0 8px; font-size: 1.05rem; color: var(--cc); }
.tc-specs { display: flex; flex-direction: column; gap: 6px; }
.tc-spec { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid transparent; color: inherit; text-decoration: none; }
.tc-spec:hover { border-color: var(--cc); }
.tc-spec img { border-radius: 8px; }
.tc-soon { margin-top: 20px; }

/* Controles */
.tc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tc-level { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: .9rem; }
.tc-level input, .tc-import input {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 10px; font: inherit;
}
.tc-level input { width: 70px; }
.tc-import { display: flex; gap: 8px; margin-bottom: 8px; }
.tc-import input { flex: 1; min-width: 0; }
#tcRemove.on { border-color: var(--horde); color: var(--horde); }
/* Avisos flotantes abajo: no desplazan los árboles al aparecer (se ocultan solos, ver say() en el JS) */
.tc-msg { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--accent-2); color: var(--accent-2); font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
@media (max-width: 980px) { .tc-msg { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
.tc-msg.bad { border-color: var(--horde); color: #e58a78; }
.tc-status { color: var(--text-dim); }

/* Paneles */
.tc-tabs { display: none; gap: 6px; margin: 8px 0; }
.tc-tabs button { flex: 1; padding: 8px; border-radius: 10px; background: var(--bg-elevated); color: var(--text-dim); border: 1px solid var(--border); font: inherit; cursor: pointer; }
.tc-tabs button.on { color: var(--text); border-color: var(--accent); background: var(--bg-card); }

.tc-trees { display: flex; gap: 14px; justify-content: center; align-items: flex-start; }
.tc-trees:not(.ready) { visibility: hidden; height: 0; overflow: hidden; }
.tc-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px 14px; min-width: 0; flex: 1 1 0; }
.tc-panel-h { flex: 0 0 auto; width: 230px; }
.tc-panel header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tc-panel h2 { margin: 0; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); flex: 1; }
.tc-count { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tc-count.over { color: var(--horde); }
.tc-mini { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 2px 8px; cursor: pointer; font: inherit; }
.tc-mini:hover { color: var(--text); border-color: var(--accent); }
.tc-pills { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tc-pill { padding: 6px 8px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: .85rem; cursor: pointer; }
.tc-pill.on { border-color: var(--accent); color: var(--text); background: var(--bg); }
.tc-hero-hint { margin: 6px 0; color: var(--text-dim); font-size: .85rem; }
.tc-canvas { position: relative; margin: 0 auto; --ns: 44px; }

/* Nodos */
.tc-edges { position: absolute; inset: 0; pointer-events: none; }
.tc-edges line { stroke: #3c4a2e; stroke-width: 3; }
.tc-edges line.open { stroke: var(--accent-2); opacity: .75; }
.tc-edges line.lit { stroke: var(--accent); opacity: 1; }

.tn {
  position: absolute; width: var(--ns); height: var(--ns); transform: translate(-50%, -50%);
  padding: 0; border: 2px solid #4a5a3a; background: #0d1209; cursor: pointer; overflow: visible; color: inherit;
}
.tn img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.tn-active { border-radius: 10px; }
.tn-active img { border-radius: 8px; }
.tn-passive { border-radius: 50%; }
.tn-passive img { border-radius: 50%; }
.tn-choice { display: flex; border-radius: 10px; overflow: hidden; width: calc(var(--ns) * 1.1); cursor: default; }
.tn-opt { flex: 1; padding: 0; border: 0; background: none; cursor: pointer; position: relative; overflow: hidden; }
.tn-opt + .tn-opt { border-left: 2px solid #4a5a3a; }
.tn-opt img { width: 100%; height: 100%; object-fit: cover; }
.tn-choice .tn-opt { opacity: .45; filter: grayscale(.8); }
.tn-choice .tn-opt.on { opacity: 1; filter: none; }
.tn-choice[data-state="tn-state-can"] .tn-opt { opacity: .9; filter: none; }

.tn[data-state="tn-state-locked"] img { filter: grayscale(1) brightness(.45); }
.tn[data-state="tn-state-can"] { border-color: var(--accent-2); box-shadow: 0 0 8px 1px rgba(111, 174, 74, .55); }
.tn[data-state="tn-state-part"] { border-color: var(--accent); box-shadow: 0 0 6px rgba(201, 154, 63, .5); }
.tn[data-state="tn-state-full"] { border-color: #ffd36b; box-shadow: 0 0 9px 1px rgba(255, 211, 107, .6); }
.tn[data-state="tn-state-free"] { border-color: #ffd36b; }
.tn[data-state="tn-state-free"] img { filter: brightness(.9); }
.tn.sel { outline: 2px dashed #fff; outline-offset: 2px; }
.tn:focus-visible, .tn-opt:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tn-rank {
  position: absolute; right: -6px; bottom: -6px; background: #0d1209; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 8px; font-size: .62rem; font-weight: 700; padding: 0 4px; line-height: 1.4; pointer-events: none;
}

/* Tooltip y detalle */
.tc-tip {
  position: absolute; z-index: 60; max-width: 260px; pointer-events: none;
  background: #0b0f08; border: 1px solid var(--accent); border-radius: 10px; padding: 8px 10px; font-size: .85rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}
.tt-name { font-weight: 700; color: var(--accent); }
.tt-name + .tt-type { margin-bottom: 4px; }
.tt-type { color: var(--text-dim); font-size: .78rem; }
.tt-rank { color: var(--text); margin-top: 4px; }
.tt-hint { margin-top: 6px; color: var(--accent-2); font-size: .78rem; }
.tc-detail {
  display: flex; align-items: center; gap: 12px; min-height: 64px; margin-top: 14px; padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
}
.tc-detail img { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); }
.tc-detail div { display: flex; flex-direction: column; gap: 2px; }
.tc-detail span { color: var(--text-dim); font-size: .85rem; }
.tc-detail a { color: var(--accent-2); font-size: .85rem; }

.tc-help { margin-top: 24px; color: var(--text-dim); font-size: .92rem; }
.tc-help h2 { font-size: 1rem; color: var(--text); }
.tc-help li { margin: 4px 0; }

/* Pantallas estrechas: un árbol cada vez */
@media (max-width: 979px) {
  .tc-tabs { display: flex; }
  .tc-panel { display: none; width: 100%; flex: 1 1 100%; }
  .tc-panel.active { display: block; }
  .tc-panel-h { width: auto; }
  .tc-import { flex-direction: column; }
}

/* WoW Forever (rejilla de 4 columnas) */
.tc-sub { margin: 22px 0 6px; font-size: 1.1rem; }
.tc-sub small { color: var(--text-dim); font-weight: 400; }
.tc-class-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.tc-class-link:hover { border-color: var(--cc); }
.tc-class-link img { border-radius: 8px; }
.tc-class-link span { display: flex; flex-direction: column; min-width: 0; }
.tc-class-link strong { color: var(--cc); }
.tc-class-link small { color: var(--text-dim); font-size: .75rem; }
.tf-points { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-dim); }
.tf-points b { color: var(--accent); font-variant-numeric: tabular-nums; }
.tf-trees .tc-panel { flex: 1 1 0; max-width: 360px; }
.tf-panel header img { border-radius: 6px; }
.tf-arrows line { stroke-width: 3; }
.tf-arrows line.open { stroke: var(--accent-2); }
.tf-arrows line.lit { stroke: var(--accent); }
.tn-new { position: absolute; left: -5px; top: -7px; color: #ffd36b; font-size: .8rem; text-shadow: 0 0 3px #000; pointer-events: none; }
.tt-desc { margin-top: 6px; color: var(--text); }
.tt-next { margin-top: 6px; color: #ffd36b; }
.tt-status { margin-top: 6px; font-size: .75rem; font-weight: 700; }
.tt-status.new { color: #ffd36b; }
.tt-status.changed { color: var(--tier-b); }
.tt-status.moved { color: var(--text-dim); }
.tf-ranks { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: .85rem; color: var(--text-dim); }
.tf-ranks li { margin: 2px 0; }
.tf-ranks li.cur { color: var(--text); }
.tf-ranks b { color: var(--accent); margin-right: 4px; }
.tc-credit { margin-top: 14px; font-size: .8rem; }
.tc-credit a { color: var(--accent-2); }

/* WoW Forever: idioma de los talentos (español / inglés) */
.tf-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); }
.tf-lang span { padding: 0 6px 0 4px; }
.tf-lang button { padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.tf-lang button[aria-pressed="true"] { background: var(--accent); color: #1a1405; }
.tf-lang button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }