/* ============================================================
   Deadman's Table — estilos propios
   ------------------------------------------------------------
   Usa las variables de assets/css/oldenait.css. Violeta para lo
   que se toca, ámbar para números. Cada tipo de objeto lleva el
   color del juego (Arma naranja, Vitalidad verde, Espíritu lila),
   siempre con su nombre escrito. Cada héroe trae su color (--h)
   y se usa solo como acento.
   ============================================================ */

:root {
  --dt-arma: #F2A243;
  --dt-vitalidad: #6CCB78;
  --dt-espiritu: #B98BFF;
  --dt-papel: #D8C49A;
}

.dt { padding-top: clamp(20px, 3vw, 36px); padding-bottom: var(--paso); }
.dt [hidden], .dt-panel[hidden], .dt-tip[hidden] { display: none !important; }
.dt .migas { margin-bottom: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dt .migas .juego { vertical-align: middle; }
@media (min-width: 1101px) { .dt > .contenedor { width: min(92%, 1440px); } }

[data-s="arma"] { --s: var(--dt-arma); }
[data-s="vitalidad"] { --s: var(--dt-vitalidad); }
[data-s="espiritu"] { --s: var(--dt-espiritu); }

/* ── Pestañas de la herramienta ────────────────────────────── */
.dt-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.dt-pestanas a {
  font-size: 14px; font-weight: 650; color: var(--apagado); text-decoration: none;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linea);
  transition: border-color .15s ease, color .15s ease;
}
.dt-pestanas a:hover { color: var(--texto); border-color: var(--linea-viva); }
.dt-pestanas a[aria-current="page"] { color: #0A0715; background: var(--violeta); border-color: var(--violeta); }

/* ── Cabeceras ─────────────────────────────────────────────── */
.dt-cabecera { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; max-width: 820px; }
.dt-cabecera h1 { font-size: var(--t-38); }
.dt-cabecera h1 span { color: var(--apagado); font-weight: 600; font-size: .62em; margin-left: 4px; }
.dt-cabecera--inicio h1 { font-size: var(--t-56); letter-spacing: -.01em; }
.dt-lema { color: var(--apagado); font-size: var(--t-17); max-width: 72ch; }
.dt-dato { color: var(--ambar); font-size: var(--t-15); font-weight: 600; }
.dt-subt { font-size: var(--t-21); margin-bottom: 12px; }
.dt-subt span { color: var(--apagado); font-weight: 500; font-size: .8em; margin-left: 6px; }

/* ── Empezá acá ────────────────────────────────────────────── */
.dt-empezar { margin: 4px 0 34px; }
.dt-guias-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dt-guias-mini a {
  display: flex; gap: 12px; align-items: center; height: 100%; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  color: var(--texto); text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.dt-guias-mini a:hover { border-color: var(--violeta); transform: translateY(-2px); }
.dt-guias-mini b { display: block; font-size: 15px; line-height: 1.3; }
.dt-guias-mini small { color: var(--apagado); font-size: 12.5px; }
.dt-guias-mini .dt-guias-todas { justify-content: center; color: var(--violeta-claro); font-weight: 650; border-style: dashed; }
.dt-guia-num {
  flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(124, 92, 255, .16); color: var(--violeta-claro); font-weight: 800;
}

/* ── Secciones ─────────────────────────────────────────────── */
.dt-seccion { margin-top: 28px; }
.dt-seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.dt-seccion-cab h2 { font-size: var(--t-28); }
.dt-seccion-cab h2 .cifra { color: var(--apagado); font-size: .7em; margin-left: 4px; }
.dt-seccion-cab p { color: var(--apagado); font-size: 14px; }

/* ── Filtros ───────────────────────────────────────────────── */
.dt-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.dt-buscar {
  position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 360px;
}
.dt-buscar svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--tenue); pointer-events: none; }
.dt-buscar input {
  width: 100%; min-height: 42px; padding: 9px 12px 9px 38px; font: inherit; font-size: 15px;
  color: var(--texto); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-chico);
}
.dt-buscar input:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(124, 92, 255, .25); }
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-chips button {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--apagado); cursor: pointer;
  min-height: 36px; padding: 6px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--linea);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.dt-chips button:hover { color: var(--texto); border-color: var(--linea-viva); }
.dt-chips button[aria-pressed="true"] { color: #0A0715; background: var(--violeta-claro); border-color: var(--violeta-claro); }
.dt-chips button[data-s][aria-pressed="true"] { background: var(--s); border-color: var(--s); }
.dt-chips button .cifra { opacity: .7; margin-left: 2px; }
.dt-orden { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--apagado); }
.dt-orden select {
  font: inherit; font-size: 14px; color: var(--texto); min-height: 36px; padding: 5px 10px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-chico);
}
.dt-filtro-estado { color: var(--apagado); font-size: 14px; margin: -6px 0 12px; }

/* ── Cartas de héroes ──────────────────────────────────────── */
.dt-cartas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dt-carta {
  --h: var(--violeta);
  position: relative; display: block; border-radius: var(--radio); overflow: hidden; isolation: isolate;
  background: var(--noche); border: 1px solid var(--linea); color: var(--texto); text-decoration: none;
  aspect-ratio: 280 / 380; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dt-carta::after {
  content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--h); z-index: 2;
}
.dt-carta:hover, .dt-carta:focus-visible {
  transform: translateY(-4px) rotate(-.6deg); border-color: color-mix(in srgb, var(--h) 70%, white);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--h) 40%, transparent);
  color: var(--texto);
}
.dt-carta-img { position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--h) 35%, var(--panel)), var(--noche)); }
.dt-carta-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.dt-carta-pie {
  position: absolute; inset: auto 0 0; z-index: 1; display: flex; flex-direction: column; gap: 1px;
  padding: 34px 10px 10px; background: linear-gradient(to top, rgba(7, 8, 18, .96) 30%, rgba(7, 8, 18, 0));
}
.dt-carta-nombre { font-size: 17px; font-weight: 800; font-stretch: var(--condensada); line-height: 1.1; }
.dt-carta-tipo { font-size: 12px; color: var(--apagado); }
.dt-carta-marca {
  position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 10.5px; font-weight: 750; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px; background: rgba(7, 8, 18, .78); color: var(--ambar); border: 1px solid rgba(255, 209, 102, .45);
}
.dt-cartas li.dt-oculto { display: none; }

/* ── Entradas a objetos y guías ────────────────────────────── */
.dt-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 40px; }
.dt-entrada {
  display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--panel);
  border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.dt-entrada:hover { border-color: var(--violeta); transform: translateY(-2px); color: var(--texto); }
.dt-entrada-iconos { display: flex; gap: 8px; }
.dt-entrada-iconos img { width: 52px; height: 52px; padding: 6px; border-radius: 10px; background: color-mix(in srgb, var(--s) 30%, var(--noche)); }
.dt-entrada-num { font-size: 44px; font-weight: 800; line-height: 1; color: var(--violeta-claro); }
.dt-entrada-t { font-size: var(--t-21); font-weight: 800; font-stretch: var(--condensada); }
.dt-entrada-d { color: var(--apagado); font-size: 14.5px; }
.dt-entrada-ir { color: var(--violeta-claro); font-weight: 650; font-size: 14px; margin-top: auto; }

/* ── Preguntas ─────────────────────────────────────────────── */
.dt-faq { max-width: 820px; margin-top: 44px; }
.dt-faq h2 { font-size: var(--t-28); margin-bottom: 10px; }
.dt-faq details { border-bottom: 1px solid var(--linea); }
.dt-faq summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 650; font-size: var(--t-17); display: flex; justify-content: space-between; gap: 16px; }
.dt-faq summary::-webkit-details-marker { display: none; }
.dt-faq summary::after { content: '+'; color: var(--violeta-claro); font-size: 22px; line-height: 1; font-weight: 400; }
.dt-faq details[open] summary::after { content: '–'; }
.dt-faq details p { color: var(--apagado); padding-bottom: 14px; }
.dt-aviso-legal { margin-top: 40px; font-size: 12.5px; color: var(--tenue); max-width: 110ch; }
.dt-aviso-legal a { color: var(--apagado); }
.dt-pie-nota { margin-top: 12px; font-size: 13px; color: var(--tenue); max-width: 90ch; }

/* ── Chips de información ──────────────────────────────────── */
.dt-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; line-height: 1.4;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea-viva); color: var(--texto); background: rgba(7, 8, 18, .55);
}
.dt-chip--cx[data-cx="1"] { border-color: rgba(108, 203, 120, .55); }
.dt-chip--cx[data-cx="3"], .dt-chip--cx[data-cx="4"] { border-color: rgba(255, 92, 122, .55); }
.dt-chip--rec { color: var(--ambar); border-color: rgba(255, 209, 102, .5); }
.dt-chip--tipo { border-color: color-mix(in srgb, var(--s) 60%, transparent); background: color-mix(in srgb, var(--s) 16%, transparent); }
.dt-esc {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; white-space: nowrap;
  color: var(--dt-espiritu); background: rgba(185, 139, 255, .13); border: 1px solid rgba(185, 139, 255, .35);
}
.dt-cond { font-size: 11px; color: var(--tenue); font-style: italic; }
.dt-hl { color: var(--texto); font-weight: 700; }
.dt-nota { display: inline-block; color: var(--apagado); font-size: .92em; margin-top: 4px; }
.dt kbd, .dt-panel kbd {
  font: inherit; font-size: .86em; font-weight: 700; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--linea-viva); border-bottom-width: 2px; background: var(--panel-alto); color: var(--texto); white-space: nowrap;
}

/* ── Héroe: cabecera ───────────────────────────────────────── */
.dt-heroe { --h: var(--violeta); }
.dt-heroe-cab {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 24px; align-items: end; padding: 22px; border-radius: var(--radio); border: 1px solid var(--linea);
  background: radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--h) 26%, transparent), transparent 60%), var(--panel);
}
.dt-heroe-fondo { position: absolute; inset: 0; z-index: -1; opacity: .3; }
.dt-heroe-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; filter: saturate(.85); }
.dt-heroe-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 18%, rgba(14, 16, 32, .55) 60%, rgba(14, 16, 32, .25)); }
.dt-heroe-carta { border-radius: var(--radio); overflow: hidden; border: 1px solid color-mix(in srgb, var(--h) 60%, transparent); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); aspect-ratio: 280 / 380; background: var(--noche); }
.dt-heroe-carta img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.dt-heroe-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dt-heroe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-heroe-txt h1 { font-size: var(--t-56); line-height: 1; }
.dt-heroe-es { color: var(--apagado); font-size: 14px; }
.dt-heroe-es b { color: var(--texto); }
.dt-heroe-rol { font-size: var(--t-17); max-width: 60ch; }
.dt-heroe-tags { color: var(--dt-papel); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.dt-heroe-nums { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; }
.dt-heroe-nums dt { font-size: 12px; color: var(--apagado); text-transform: uppercase; letter-spacing: .06em; }
.dt-heroe-nums dd { margin: 0; font-size: 22px; font-weight: 800; color: var(--ambar); }
.dt-heroe-nums small { font-size: 12.5px; color: var(--apagado); font-weight: 500; }

.dt-indice {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 16px 0 6px; padding: 8px 0; background: linear-gradient(var(--noche) 75%, rgba(7, 8, 18, 0));
}
.dt-indice::-webkit-scrollbar { display: none; }
.dt-indice a { flex-shrink: 0; font-size: 13.5px; font-weight: 650; color: var(--apagado); text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; }
.dt-indice a:hover, .dt-indice a.es-actual { color: var(--texto); border-color: var(--linea-viva); }

.dt-bloque { margin-top: 30px; scroll-margin-top: 60px; }
.dt-bloque > h2 { font-size: var(--t-28); margin-bottom: 8px; }
.dt-bloque-bajada { color: var(--apagado); max-width: 80ch; margin-bottom: 16px; }
.dt-h3 { font-size: var(--t-17); margin: 22px 0 10px; }

/* ── Habilidades ───────────────────────────────────────────── */
.dt-habs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .dt-habs { grid-template-columns: 1fr; } }
.dt-hab {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; scroll-margin-top: 60px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
}
.dt-hab--ult { border-color: rgba(255, 209, 102, .4); background: linear-gradient(160deg, rgba(255, 209, 102, .06), transparent 40%), var(--panel); }
.dt-hab-cab { display: flex; gap: 14px; align-items: center; }
.dt-hab-icono {
  flex-shrink: 0; width: 60px; height: 60px; padding: 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--h) 55%, var(--panel-alto)), var(--noche));
  border: 1px solid color-mix(in srgb, var(--h) 60%, transparent);
}
.dt-hab--ult .dt-hab-icono { border-color: rgba(255, 209, 102, .7); }
.dt-hab-tecla { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); font-weight: 700; }
.dt-hab--ult .dt-hab-tecla { color: var(--ambar); }
.dt-hab h3 { font-size: var(--t-21); line-height: 1.15; }
.dt-hab-en { font-size: 13px; color: var(--tenue); }
.dt-hab-cabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dt-hab-cabs li { font-size: 12.5px; color: var(--apagado); padding: 3px 9px; border-radius: 6px; background: var(--panel-alto); }
.dt-hab-cabs b { color: var(--ambar); }
.dt-hab-desc { color: var(--texto); font-size: 15px; line-height: 1.55; }
.dt-hab-desc p + p { margin-top: 6px; }
.dt-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin: 0; }
.dt-prop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--linea); font-size: 13.5px; }
.dt-prop dt { color: var(--apagado); }
.dt-prop dd { margin: 0; text-align: right; font-weight: 700; color: var(--texto); white-space: nowrap; }
.dt-prop dd .cifra { color: var(--ambar); }
.dt-mejoras { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dt-mejoras li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; padding: 8px 10px; border-radius: var(--radio-chico); background: var(--noche); border: 1px solid var(--linea); }
.dt-mejora-ap {
  flex-shrink: 0; min-width: 48px; text-align: center; font-size: 12px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  color: #0A0715; background: var(--violeta-claro);
}
.dt-mejoras li:nth-child(2) .dt-mejora-ap { background: #8F78FF; color: #fff; }
.dt-mejoras li:nth-child(3) .dt-mejora-ap { background: var(--ambar); }

/* ── Árbol de mejoras ──────────────────────────────────────── */
.dt-resumen-arbol { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding: 12px 14px; border-left: 3px solid var(--violeta); background: var(--panel); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; font-size: 14.5px; }
.dt-resumen-arbol span:first-child { display: inline-block; min-width: 210px; color: var(--apagado); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.dt-resumen-arbol small { color: var(--apagado); }
.dt-arbol-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dt-arbol-tabs button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font: inherit; cursor: pointer; text-align: left;
  padding: 8px 12px; border-radius: var(--radio-chico); color: var(--apagado); background: transparent; border: 1px solid var(--linea);
}
.dt-arbol-tabs button b { color: var(--texto); font-size: 14px; }
.dt-arbol-tabs button span { font-size: 12.5px; }
.dt-arbol-tabs button[aria-selected="true"] { border-color: var(--violeta); background: rgba(124, 92, 255, .12); }
.dt-grilla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }
.dt-grilla { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; font-size: 13px; }
.dt-grilla th, .dt-grilla td { padding: 6px 2px; text-align: center; border-bottom: 1px solid var(--linea); }
.dt-grilla thead th { color: var(--tenue); font-weight: 600; font-size: 12px; }
.dt-grilla tbody th, .dt-grilla tfoot th {
  position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; padding: 6px 10px; min-width: 170px; max-width: 200px;
}
.dt-grilla tbody th { font-weight: 650; color: var(--texto); }
.dt-grilla-hab { display: flex; align-items: center; gap: 8px; }
.dt-grilla tbody th img { width: 28px; height: 28px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--h) 45%, var(--noche)); flex-shrink: 0; }
.dt-grilla-hab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-grilla th:first-child { width: 190px; }
.dt-grilla tfoot td, .dt-grilla tfoot th { color: var(--tenue); font-size: 11.5px; border-bottom: 0; }
.dt-grilla thead th:first-child { position: sticky; left: 0; background: var(--panel); text-align: left; padding-left: 10px; }
.dt-paso { font-weight: 800; }
.dt-paso::before { content: none; }
.dt-paso--d, .dt-paso--1, .dt-paso--2, .dt-paso--3 { position: relative; }
.dt-paso--d { color: var(--violeta-claro); }
.dt-paso--1 { color: #0A0715; }
.dt-paso--2 { color: #fff; }
.dt-paso--3 { color: #0A0715; }
.dt-paso--d, .dt-paso--1, .dt-paso--2, .dt-paso--3 { background-clip: content-box; }
.dt-grilla td.dt-paso { padding: 4px; }
.dt-grilla td.dt-paso { line-height: 26px; }
.dt-paso--d { box-shadow: inset 0 0 0 2px var(--violeta); border-radius: 8px; }
.dt-paso--1 { background: var(--violeta-claro); border-radius: 8px; }
.dt-paso--2 { background: #8F78FF; border-radius: 8px; }
.dt-paso--3 { background: var(--ambar); border-radius: 8px; }
.dt-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.dt-barras li { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 48px 92px; gap: 10px; align-items: center; font-size: 14px; }
.dt-barra-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-barra { height: 10px; border-radius: 999px; background: var(--panel-alto); overflow: hidden; }
.dt-barra span { display: block; height: 100%; width: var(--v); background: var(--violeta); border-radius: 999px; }
.dt-barra-v { color: var(--ambar); font-weight: 700; text-align: right; }
.dt-barra-w { color: var(--apagado); font-size: 12.5px; }

/* ── Objetos del héroe ─────────────────────────────────────── */
.dt-perfil { max-width: 720px; margin-bottom: 6px; }
.dt-perfil-t { font-size: 13px; color: var(--apagado); margin-bottom: 6px; }
.dt-perfil-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--panel-alto); }
.dt-perfil-barra span { background: var(--s); }
.dt-perfil-ley { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--apagado); }
.dt-perfil-ley li::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--s); margin-right: 6px; vertical-align: -1px; }
.dt-perfil-ley b { color: var(--texto); }

.dt-obj { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--texto); text-decoration: none; border-radius: var(--radio-chico); }
.dt-obj img {
  flex-shrink: 0; width: 38px; height: 38px; padding: 5px; border-radius: 8px;
  background: color-mix(in srgb, var(--s) 32%, var(--noche)); border: 1px solid color-mix(in srgb, var(--s) 55%, transparent);
}
.dt-obj-n { font-weight: 650; font-size: 14px; line-height: 1.25; }
.dt-obj:hover .dt-obj-n, .dt-obj:focus-visible .dt-obj-n { color: var(--violeta-claro); text-decoration: underline; text-underline-offset: 3px; }

.dt-sinergias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.dt-sinergias li { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.dt-sinergias p { font-size: 13.5px; color: var(--apagado); }
.dt-sinergias b { color: var(--texto); }
.dt-mas { display: inline-block; margin-right: 6px; font-weight: 800; color: var(--dt-vitalidad); }

.dt-fases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.dt-fase { padding: 14px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.dt-fase h4 { font-size: 15px; margin-bottom: 10px; }
.dt-fase h4 small { display: block; font-size: 12px; color: var(--apagado); font-weight: 500; }
.dt-fase ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dt-fase li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dt-fase-n { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.dt-fase-n .cifra { color: var(--ambar); font-weight: 750; font-size: 14px; }
.dt-fase-n small { color: var(--tenue); font-size: 11.5px; }

/* ── Números e historia ────────────────────────────────────── */
.dt-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 30px; }
.dt-props--tabla { grid-template-columns: 1fr; padding: 14px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.dt-props-t { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); font-weight: 700; margin-bottom: 4px; }
.dt-lore { max-width: 80ch; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.dt-lore summary { cursor: pointer; padding: 14px 16px; font-weight: 650; }
.dt-lore div { padding: 0 16px 16px; color: var(--apagado); }
.dt-lore p + p { margin-top: 10px; }

.dt-vecinos { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--linea); }
.dt-vecinos a { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font-weight: 700; min-width: 0; }
.dt-vecinos a span { display: flex; flex-direction: column; min-width: 0; }
.dt-vecinos small { font-size: 11.5px; color: var(--apagado); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.dt-vecinos img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--panel-alto); flex-shrink: 0; }
.dt-vecinos a[rel="next"] { text-align: right; }
.dt-vecinos a[rel="next"] span { align-items: flex-end; }
.dt-vecinos .dt-vecinos-todos { font-weight: 600; color: var(--violeta-claro); font-size: 14px; }
.dt-objeto-pag .dt-vecinos img { border-radius: 8px; padding: 5px; background: color-mix(in srgb, var(--s, var(--violeta)) 30%, var(--noche)); }

/* ── Tienda ────────────────────────────────────────────────── */
.dt-tienda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dt-tienda.dt-una { grid-template-columns: 1fr; }
.dt-tienda-col { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); overflow: hidden; }
.dt-tienda-cab { padding: 12px 14px; border-bottom: 1px solid var(--linea); background: linear-gradient(90deg, color-mix(in srgb, var(--s) 22%, transparent), transparent); }
.dt-tienda-cab h2 { font-size: var(--t-21); color: var(--s); }
.dt-tienda-cab p { font-size: 12.5px; color: var(--apagado); }
.dt-tier { padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.dt-tier:last-child { border-bottom: 0; }
.dt-tier h3 { font-size: 13px; color: var(--ambar); margin-bottom: 8px; font-weight: 750; }
.dt-tier h3 small { color: var(--tenue); font-weight: 500; }
.dt-tier--sb h3 { color: var(--dt-papel); }
.dt-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.dt-tiles li.dt-oculto { display: none; }
.dt-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 7px; height: 100%;
  border-radius: 6px; color: var(--texto); text-decoration: none; text-align: center; border: 1px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.dt-tile:hover, .dt-tile:focus-visible { background: var(--panel-alto); border-color: var(--linea-viva); color: var(--texto); }
.dt-tile img { width: 52px; height: 52px; padding: 7px; border-radius: 6px; background: color-mix(in srgb, var(--s) 30%, var(--noche)); border: 1px solid color-mix(in srgb, var(--s) 50%, transparent); }
.dt-tile--act img { border-radius: 50%; }
.dt-tile span { font-size: 11.5px; line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.dt-tile.es-elegida { background: rgba(124, 92, 255, .16); border-color: var(--violeta); }
.dt-tienda-col.dt-oculto { display: none; }
.dt-tier.dt-vacio { display: none; }

/* ── Ficha de objeto (página y panel) ──────────────────────── */
.dt-ficha { display: flex; flex-direction: column; gap: 14px; }
.dt-objeto-pag .dt-ficha { max-width: 860px; }
.dt-ficha-cab { display: flex; gap: 16px; align-items: center; }
.dt-ficha-icono {
  flex-shrink: 0; width: 84px; height: 84px; padding: 12px; border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--s) 45%, var(--panel-alto)), var(--noche));
  border: 1px solid color-mix(in srgb, var(--s) 60%, transparent);
}
.dt-ficha-n { font-size: var(--t-38); line-height: 1.05; }
.dt-panel .dt-ficha-n { font-size: var(--t-28); }
.dt-ficha-en { color: var(--tenue); font-size: 14px; }
.dt-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dt-ficha-desc { font-size: 15.5px; line-height: 1.55; }
.dt-ficha .dt-props { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.dt-ficha-desc p + p { margin-top: 6px; }
.dt-ficha-sec { padding: 12px 14px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); display: flex; flex-direction: column; gap: 8px; }
.dt-panel .dt-ficha-sec { background: var(--noche); }
.dt-ficha-sec--activa { border-color: rgba(124, 92, 255, .45); }
.dt-ficha-sec-t { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); font-weight: 750; }
.dt-ficha-cd { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.dt-ficha-cd b { color: var(--ambar); }
.dt-ficha-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dt-ficha-objs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }
.dt-ficha-global { font-size: 14px; color: var(--apagado); }
.dt-ficha-global b { color: var(--ambar); }
.dt-ficha-lista-t { font-size: 13px; color: var(--apagado); margin-top: 6px; }
.dt-ficha-heroes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.dt-ficha-heroes a { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 999px; background: var(--panel-alto); color: var(--texto); text-decoration: none; font-size: 13.5px; font-weight: 650; }
.dt-ficha-heroes a:hover { background: rgba(124, 92, 255, .2); color: var(--texto); }
.dt-ficha-heroes img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.dt-ficha-heroes span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-ficha-heroes b { color: var(--ambar); font-size: 12.5px; }
.dt-ficha-heroes b.dt-mas { color: var(--dt-vitalidad); margin: 0; }

/* ── Panel lateral ─────────────────────────────────────────── */
.dt-panel { position: fixed; inset: 0; z-index: 60; }
.dt-panel-fondo { position: absolute; inset: 0; background: rgba(3, 4, 10, .6); backdrop-filter: blur(2px); }
.dt-panel-caja {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100%); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 20px 30px; background: var(--panel); border-left: 1px solid var(--linea-viva); box-shadow: var(--sombra);
  animation: dt-entra .2s ease;
}
.dt-panel-caja:focus { outline: none; }
@keyframes dt-entra { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.dt-panel-cerrar {
  position: sticky; top: 0; float: right; margin: -8px -6px 0 10px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--texto); background: var(--panel-alto); border: 1px solid var(--linea-viva);
}
.dt-panel-ir { display: inline-block; margin-top: 6px; color: var(--violeta-claro); font-weight: 650; font-size: 14px; }

/* ── Vista previa al pasar el mouse ───────────────────────── */
.dt-tip {
  position: fixed; z-index: 70; width: min(340px, calc(100vw - 24px)); pointer-events: none;
  padding: 12px 14px; border-radius: var(--radio); background: var(--panel-alto); border: 1px solid var(--linea-viva);
  box-shadow: var(--sombra); font-size: 13.5px; line-height: 1.45;
}
.dt-tip-cab { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.dt-tip-cab img { width: 40px; height: 40px; padding: 5px; border-radius: 8px; background: color-mix(in srgb, var(--s) 32%, var(--noche)); }
.dt-tip-cab b { display: block; font-size: 15px; }
.dt-tip-cab small { color: var(--apagado); }
.dt-tip p { color: var(--texto); }
.dt-tip .dt-props { grid-template-columns: 1fr; margin-top: 8px; gap: 0; }

/* ── Guías ─────────────────────────────────────────────────── */
.dt-guias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.dt-guia-tarjeta {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; gap: 6px 12px; height: 100%; padding: 16px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.dt-guia-tarjeta:hover { border-color: var(--violeta); transform: translateY(-2px); color: var(--texto); }
.dt-guia-tarjeta .dt-guia-num { grid-row: 1 / 4; }
.dt-guia-t { font-size: var(--t-17); font-weight: 800; line-height: 1.25; }
.dt-guia-d { color: var(--apagado); font-size: 14px; }
.dt-guia-meta { color: var(--tenue); font-size: 12.5px; font-weight: 600; }
.dt-guia { max-width: 780px; }
.dt-guia-cab { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.dt-guia-cab h1 { font-size: var(--t-38); line-height: 1.1; }
.dt-guia-cuerpo { font-size: 16.5px; line-height: 1.65; }
.dt-guia-cuerpo > * + * { margin-top: 14px; }
.dt-guia-cuerpo h2 { font-size: var(--t-21); margin-top: 30px; }
.dt-guia-cuerpo ul, .dt-guia-cuerpo ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.dt-guia-cuerpo li::marker { color: var(--violeta-claro); }
.dt-pasos { counter-reset: paso; list-style: none; padding-left: 0 !important; }
.dt-pasos li { counter-increment: paso; position: relative; padding-left: 40px; }
.dt-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; font-size: 14px; font-weight: 800; background: rgba(124, 92, 255, .18); color: var(--violeta-claro);
}
.dt-aviso { padding: 12px 14px; border-left: 3px solid var(--ambar); background: rgba(255, 209, 102, .07); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; font-size: 15px; }
.dt-fuente { font-size: 12.5px; color: var(--tenue); margin-top: 6px !important; }
.dt-tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.dt-tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.dt-tabla th, .dt-tabla td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.dt-tabla thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--apagado); background: var(--panel); }
.dt-tabla tbody th { font-weight: 700; color: var(--texto); white-space: nowrap; }
.dt-tabla tbody tr:last-child > * { border-bottom: 0; }
.dt-mini-heroes { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px !important; }
.dt-mini-heroes a { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.dt-mini-heroes a:hover { border-color: var(--violeta); }
.dt-mini-heroes img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dt-mini-heroes small { display: block; font-size: 12px; color: var(--apagado); font-weight: 500; }
.dt-vecinos--guias a { max-width: 40%; }
.dt-nada { max-width: 620px; padding: 30px 0; display: flex; flex-direction: column; gap: 12px; }

/* ── Teléfono y tablet ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .dt-tienda { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dt-heroe-cab { display: block; padding: 14px; }
  .dt-heroe-carta { float: left; width: 96px; margin: 0 14px 10px 0; }
  .dt-heroe-txt { display: block; }
  .dt-heroe-txt > * + * { margin-top: 8px; }
  .dt-heroe-txt h1 { font-size: var(--t-38); }
  .dt-heroe-rol { clear: both; padding-top: 4px; }
  .dt-heroe-nums { clear: both; gap: 8px 18px; }
  .dt-heroe-nums dd { font-size: 19px; }
  .dt-grilla tbody th, .dt-grilla tfoot th, .dt-grilla th:first-child { min-width: 128px; max-width: 128px; width: 128px; padding-left: 8px; padding-right: 6px; }
  .dt-grilla tbody th img { width: 24px; height: 24px; }
  .dt-grilla { font-size: 12.5px; min-width: 640px; }
  .dt-cartas { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .dt-carta-nombre { font-size: 15px; }
  .dt-carta-pie { padding: 26px 7px 7px; }
  .dt-carta-tipo { font-size: 11px; }
  .dt-filtros { gap: 8px; }
  .dt-buscar { max-width: none; flex-basis: 100%; }
  .dt-barras li { grid-template-columns: minmax(90px, 1fr) 1.2fr 40px; }
  .dt-barra-w { display: none; }
  .dt-resumen-arbol span:first-child { display: block; }
  .dt-panel-caja { top: auto; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--linea-viva); border-radius: 16px 16px 0 0; animation-name: dt-sube; }
  @keyframes dt-sube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .dt-vecinos .dt-vecinos-todos { display: none; }
  .dt-vecinos a { font-size: 14px; }
  .dt-ficha-n { font-size: var(--t-28); }
  .dt-tiles { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dt-carta, .dt-entrada, .dt-guias-mini a, .dt-guia-tarjeta, .dt-panel-caja { transition: none; animation: none; }
  .dt-carta:hover { transform: none; }
}