/* D-UI-TACTICAS — colocación de la pantalla de Tácticas (Personaje y Escuadra).
   El aspecto lo ponen las piezas (piezas.css); aquí sólo va dónde está cada cosa.
   La regla `* { font-family … !important }` de v2-theme alcanza a cada nodo: los textos propios de esta
   pantalla declaran su familia con !important (como las piezas). */

/* ───────── Encaje en el escenario ───────── */

#rpg-root #buildingPanel:has(> #buildingContent > .tac-raiz) { overflow: hidden; }
#rpg-root #buildingPanel:has(> #buildingContent > .tac-raiz) > div:first-child { display: none; }
#rpg-root #buildingPanel #buildingContent:has(> .tac-raiz) { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.tac-raiz {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-esp-3);
  color: var(--ui-tinta-1);
}

.tac-raiz :is(.tac-nota, .tac-vacio, .tac-grupo__rotulo, .tac-mini__texto, .tac-mini__texto *, .tac-elegido, .tac-elegido *,
  .tac-aviso, .tac-leyenda, .tac-hueco__rotulo, .tac-conjunto, .tac-conjunto *, .tac-banco, .tac-banco *, .tac-venta__rotulo,
  .tac-h__cuenta, .tac-mini__actividad, .tac-mini__boton, .tac-tarjeta--libre span) {
  font-family: var(--ui-fuente-texto) !important;
}
.tac-raiz :is(.tac-titulo, .tac-h) { font-family: var(--ui-fuente-titulo) !important; }

/* ───────── Cabecera: título, pestañas y grupo ───────── */

.tac-cabecera { display: flex; align-items: center; gap: 18px; flex: none; }
.tac-titulo { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-acento-luz); }
.tac-grupo { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* D-TITULOS D-TIT-2 — pestañas a la izquierda, título centrado en Germania One, grupo a la derecha */
.tac-cabecera { display: grid; grid-template-columns: 1fr auto 1fr; }
.tac-cabecera > .tac-titulo { grid-column: 2; grid-row: 1; text-align: center; font-family: 'Germania One', var(--ui-fuente-titulo) !important;
  font-weight: 400; letter-spacing: .07em; font-size: clamp(24px, 2vw, 36px); }
.tac-cabecera > :not(.tac-titulo):not(.tac-grupo) { grid-column: 1; grid-row: 1; justify-self: start; }
.tac-cabecera > .tac-grupo { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
.tac-grupo__rotulo { margin-right: 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-tinta-3); }
.tac-retrato {
  width: 46px; height: 46px; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 50%; border: 2px solid #333b4f; background: var(--ui-fondo-1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tac-retrato img { width: 100%; height: 160%; object-fit: cover; object-position: 50% 6%; }
.tac-retrato:hover { border-color: var(--ui-acento-suave); }
.tac-retrato--sel { border-color: var(--ui-acento); box-shadow: 0 0 12px var(--ui-acento-brillo); }

/* ───────── Textos comunes ───────── */

.tac-h {
  margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ui-acento);
}
.tac-h__cuenta { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--ui-tinta-3); }
.tac-nota, .tac-vacio { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--ui-tinta-3); }
.tac-sep { flex: none; height: 1px; margin: 4px 0; background: linear-gradient(90deg, transparent, var(--ui-linea), transparent); }

/* ───────── Personaje: tres columnas ───────── */

.tac-cuerpo {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(280px, 22%) minmax(400px, 36%) minmax(0, 1fr); gap: 12px;
}
.tac-col { min-height: 0; display: flex; flex-direction: column; padding: 14px 16px; }
.tac-zona { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }

/* Ficha */
.tac-col--ficha .tac-zona { overflow-y: auto; scrollbar-width: thin; }
.tac-datos { display: flex; flex-direction: column; }
.tac-dos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.tac-fila { min-width: 0; }
.tac-aa { display: flex; flex-wrap: wrap; gap: 6px; }
.tac-conjunto { border: 1px solid color-mix(in srgb, var(--ui-rareza-set) 30%, transparent); border-radius: 5px; padding: 6px 8px; font-size: 11px; }
.tac-conjunto + .tac-conjunto { margin-top: 6px; }
/* D-REZO-VISIBLE D-RV-5 — la bendición del Templo bajo la vida, en letra de texto */
.tac-bendicion { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 11px; line-height: 1.3; color: #cfe8c4; cursor: help; }
.tac-raiz .tac-bendicion, .tac-raiz .tac-bendicion * { font-family: var(--ui-fuente-texto) !important; text-transform: none !important; }
.tac-bendicion__icono { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.tac-conjunto__nombre { font-weight: 600; color: var(--ui-rareza-set); }
.tac-conjunto__nombre span { font-weight: 400; color: var(--ui-tinta-3); }
.tac-conjunto__tramo { display: flex; gap: 6px; color: var(--ui-tinta-3); }
.tac-conjunto__tramo span { min-width: 1.4em; text-align: right; }
.tac-conjunto__tramo--activo { color: var(--ui-mejora); }

/* Personaje en su escena, con las casillas a los lados */
.tac-col--personaje { position: relative; padding: 0; overflow: hidden; }
.tac-zona--personaje, .tac-escena, .tac-escena > .ui-escena { position: absolute; inset: 0; }
.tac-escena > .ui-escena { border-radius: 6px; }
.tac-escena .ui-escena__figura:not(.ui-escena__figura--video) { height: 84%; bottom: 6%; }
/* El vídeo trae la figura al 92 % de su fotograma: a 92 % de alto mide como una imagen al 84 %. */
.tac-escena .ui-escena__figura--video { height: 92%; bottom: 6%; }
/* D-OBJETOS-41 — ocho huecos por lado: el hueco se ajusta al alto de la zona (8 × (hueco + rótulo + aire) en el alto del
   lado = zona − 88 px; el rótulo y el aire, 22 px), entre 40 y 62 px. */
.tac-zona--personaje { container-type: size; }
.tac-lado { position: absolute; top: 64px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; --ui-lado: clamp(40px, calc((100cqh - 88px) / 8 - 22px), 62px); }
.tac-lado--izq { left: 16px; }
.tac-lado--der { right: 16px; }
.tac-hueco { position: relative; }
.tac-hueco__rotulo {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; white-space: nowrap;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-tinta-3); pointer-events: none;
}

/* Mochila */
.tac-col--mochila { overflow: hidden; }
.tac-caja-rejilla { flex: 1; min-height: 0; overflow: hidden; --tac-lado: 64px; }
.tac-rejilla { flex: none; align-content: start; --ui-lado: var(--tac-lado); }
.tac-mision { opacity: 0.6; }
.tac-pie-mochila { flex: none; min-height: 30px; display: flex; justify-content: center; align-items: center; }
.tac-venta { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tac-venta__rotulo { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-tinta-3); }
/* D-PULIDO D-PUL-8 — la regla del reparto con el grupo de hoy, bajo los filtros de venta */
.tac-venta__reparto { flex: none; margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ui-tinta-2); }
/* D-DEMO-PEND-1 D-DP-1 — la regla fija de lo que nunca se vende solo */
.tac-venta__regla { flex: none; margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ui-tinta-2); }
.tac-arrastrando { opacity: 0.45; }

/* ───────── Escuadra ───────── */

.tac-escuadra { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.tac-aviso {
  flex: none; padding: 6px 10px; border-radius: 6px; font-size: 12px; color: var(--ui-acento-luz);
  border: 1px solid color-mix(in srgb, var(--ui-acento) 50%, transparent); background: rgba(80, 50, 10, 0.35);
}
.tac-escuadra__titulo { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tac-escuadra__titulo .tac-h { margin: 0; justify-content: flex-start; }
.tac-leyenda { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ui-tinta-3); }
.tac-punto { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--tac-papel); }

.tac-papel--tank { --tac-papel: #60a5fa; }
.tac-papel--healer { --tac-papel: #4ade80; }
.tac-papel--dps { --tac-papel: #f87171; }
.tac-papel--support { --tac-papel: #c084fc; }
.tac-papel { position: absolute; z-index: 3; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--tac-papel); box-shadow: 0 0 6px var(--tac-papel); }

.tac-fila-combate { flex: 1.25 1 0; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tac-tarjeta { position: relative; min-height: 0; }
.tac-tarjeta[draggable="true"] { cursor: grab; }
.tac-tarjeta__marco { position: absolute; inset: 0; overflow: hidden; }
.tac-tarjeta .ui-escena { position: absolute; inset: 0; }
.tac-tarjeta .ui-escena__placa { top: auto; bottom: 10px; font-size: 13px; }
.tac-tarjeta--libre .tac-tarjeta__marco { display: grid; place-items: center; border-style: dashed; }
.tac-tarjeta--libre span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-tinta-3); }
.tac-tarjeta.tac-sel .tac-tarjeta__marco { border-color: var(--ui-acento); box-shadow: 0 0 16px var(--ui-acento-brillo); }

.tac-escuadra__abajo { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px; }
.tac-caja { min-height: 0; display: flex; flex-direction: column; padding: 12px 14px; overflow: hidden; }
.tac-reserva { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.tac-fuera { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; }

.tac-mini {
  position: relative; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid #333b4f; border-radius: 6px; background: rgba(10, 13, 20, 0.7);
}
.tac-mini[draggable="true"] { cursor: grab; }
.tac-mini.tac-sel { border-color: var(--ui-acento); box-shadow: 0 0 10px var(--ui-acento-brillo); }
.tac-mini__cara { flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; border: 1px solid #333b4f; }
.tac-mini__cara img { width: 100%; height: 160%; object-fit: cover; object-position: 50% 6%; }
.tac-mini__texto { min-width: 0; display: flex; flex-direction: column; }
.tac-mini__texto b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--ui-acento-luz); }
.tac-mini__texto small { font-size: 10px; color: var(--ui-tinta-2); }
.tac-mini .tac-papel { top: 5px; right: 5px; width: 8px; height: 8px; }
.tac-mini__actividad { margin-left: auto; font-size: 10px; color: #e0a040; }
.tac-mini__boton {
  margin-left: auto; padding: 2px 8px; cursor: pointer; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ui-mejora); background: transparent; border: 1px solid color-mix(in srgb, var(--ui-mejora) 50%, transparent); border-radius: 4px;
}
.tac-ocupado { opacity: 0.6; }

.tac-banco {
  min-height: 0; display: grid; place-items: center; text-align: center;
  border: 1px dashed #333b4f; border-radius: 6px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-tinta-3);
}
.tac-banco--cerrado { opacity: 0.35; }
.tac-banco__unir { padding: 4px; cursor: pointer; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-acento); background: none; border: 0; }

.tac-raiz .slot-hover { outline: 2px solid var(--ui-acento); outline-offset: 2px; }
.tac-raiz .guild-merc-dragging { opacity: 0.5; }

.tac-caja--pie { justify-content: space-between; }
.tac-pie-escuadra { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.tac-elegido { font-size: 12px; }
.tac-elegido b { color: var(--ui-acento-luz); }
.tac-elegido small { color: var(--ui-tinta-2); }
.tac-elegido p { margin: 6px 0 0; max-height: 7.5em; overflow: hidden; font-size: 11px; line-height: 1.5; color: var(--ui-tinta-2); }

/* ───────── Habilidades: su interior de hoy (provisional, se rehace con P90) ───────── */

.tac-habilidades { flex: 1; min-height: 0; overflow-y: auto; }

/* ───────── Estilo B · Estandartes (D-UI-TACTICAS-B) — mismo lenguaje que sitio.css B ───────── */

/* Título en una cinta carmesí con muesca, colgada de su barra dorada */
.tac-raiz[data-estilo="B"] .tac-titulo { position: relative; margin-top: 8px; padding: 8px 30px 9px 18px; color: #fff3c4;
  background: linear-gradient(180deg, #4d1a12, #2c0e09); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(233,196,106,.35); }
.tac-raiz[data-estilo="B"] .tac-cinta-barra { position: absolute; left: 0; right: 12px; top: 0; height: 4px;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); }
/* Cajas: estandarte oscuro, borde dorado tenue, sin esquinas ni línea interior */
.tac-raiz[data-estilo="B"] .ui-marco { background: linear-gradient(180deg, rgba(14,10,6,.94), rgba(8,6,4,.96)); border: 1px solid rgba(200,168,96,.4);
  border-top: 3px solid #6b2418; box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 10px 22px rgba(0,0,0,.5); }
.tac-raiz[data-estilo="B"] .ui-marco::before { display: none; }
.tac-raiz[data-estilo="B"] .ui-marco > .ui-esquina { display: none; }
/* Rótulos: banderín carmesí, la cuenta en oro */
.tac-raiz[data-estilo="B"] .tac-h { padding: 3px 22px 3px 10px; color: #fff3c4;
  background: linear-gradient(180deg, #6b2418, #3a120c); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.tac-raiz[data-estilo="B"] .tac-h__cuenta { color: #e9c46a; }
/* Pestañas: banderines con punta abajo; la activa en carmesí vivo con borde dorado */
.tac-raiz[data-estilo="B"] .tac-cabecera .ui-pestana { padding-bottom: 12px; border-radius: 0; color: #e9d9b6;
  background: linear-gradient(180deg, #2c0e09, #180806); border-color: rgba(200,168,96,.35);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); }
.tac-raiz[data-estilo="B"] .tac-cabecera .ui-pestana--activa { color: #fff3c4; background: linear-gradient(180deg, #9a2c1c, #5a1810);
  border-color: #e9c46a; box-shadow: inset 0 0 0 1px #e9c46a; }
/* Retratos del grupo: borde granate; el elegido en oro */
.tac-raiz[data-estilo="B"] .tac-retrato { border-color: #5a1810; }
.tac-raiz[data-estilo="B"] .tac-retrato--sel { border-color: #e9c46a; }

/* ───────── Pantallas bajas (1366×768 y parecidas) ───────── */

@media (max-height: 820px) {
  .tac-titulo { font-size: 17px; }
  .tac-retrato { width: 36px; height: 36px; }
  .tac-col { padding: 10px 12px; }
  .tac-lado { top: 52px; bottom: 12px; --ui-lado: clamp(36px, calc((100cqh - 64px) / 8 - 4px), 52px); }
  .tac-hueco__rotulo { display: none; }
  .tac-cuerpo { grid-template-columns: minmax(250px, 24%) minmax(360px, 37%) minmax(0, 1fr); gap: 8px; }
  .tac-mini__cara { width: 32px; height: 32px; }
  .tac-caja-rejilla { --tac-lado: 54px; }
  .tac-zona { gap: 3px; }
  .tac-col--ficha .ui-barra { height: 16px; }
  .tac-col--ficha :is(.ui-dato, .ui-atributo) { padding-top: 0; padding-bottom: 0; font-size: 11px; }
  .tac-sep { margin: 2px 0; }
  .tac-h { margin-bottom: 1px; font-size: 11px; }
}

/* ───────── Pantalla estrecha (D-UI-M-14: que siga siendo usable) ───────── */

@media (max-width: 1000px) {
  #rpg-root #buildingPanel:has(> #buildingContent > .tac-raiz) { overflow-y: auto; }
  #rpg-root #buildingPanel #buildingContent:has(> .tac-raiz) { flex: none; }
  .tac-raiz, .tac-cuerpo, .tac-escuadra { flex: none; }
  .tac-cabecera { flex-wrap: wrap; }
  .tac-cuerpo { grid-template-columns: 1fr; }
  .tac-col--ficha .tac-zona { flex: none; overflow: visible; }
  .tac-col--personaje { min-height: 520px; }
  .tac-caja-rejilla { flex: none; height: 300px; }
  .tac-fila-combate { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tac-tarjeta { height: 240px; }
  .tac-escuadra__abajo { flex: none; grid-template-columns: 1fr; }
  .tac-reserva { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 56px; }
}

/* ───────── Mochila: apartados, filtros, orden y materiales (D-UI-TACTICAS parte B) ───────── */

.tac-apartados { flex: none; margin-bottom: 6px; }
.tac-apartados .ui-pestana { padding: 4px 10px; font-size: 11px; }
.tac-filtros { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.tac-filtros .ui-pildoras { display: contents; }
.tac-orden { margin-left: auto; }
.tac-caja-materiales { flex: 1; min-height: 0; overflow: hidden; }
.tac-materiales { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tac-material {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  border: 1px solid var(--ui-linea-suave); border-radius: 6px; background: var(--ui-fondo-2);
}
.tac-material--cero { opacity: 0.45; }
.tac-material__icono {
  flex: none; width: 24px; height: 24px;
  background: linear-gradient(160deg, #fffaf0 0%, color-mix(in srgb, var(--tac-mc, #e8e2d4) 70%, #fffaf0) 40%, color-mix(in srgb, var(--tac-mc, #e8e2d4) 85%, #000) 100%);
  -webkit-mask: var(--ui-icono) center / contain no-repeat;
  mask: var(--ui-icono) center / contain no-repeat;
}
/* D-OFICIOS fase 1 — material con icono pintado: la imagen tal cual, sin máscara ni tinte */
.tac-material__icono--pintado { width: 28px; height: 28px; background: center / contain no-repeat; -webkit-mask: none; mask: none; }
.tac-material__nombre { flex: 1; min-width: 0; font-size: 12px; color: var(--ui-tinta-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-material__cantidad { flex: none; font-size: 12px; font-weight: 700; color: var(--ui-tinta-0); font-variant-numeric: tabular-nums; }

/* ───────── D-PULIDO-TACTICAS (claude/_CLAUDE_D_PULIDO_TACTICAS_MESA.md) ───────── */

/* D-PUL-TAC-6 — ficha de material de alto fijo (ALTO_MATERIAL, ANCHO_MATERIAL y HUECO_MATERIAL de vista.ts): así se sabe
   cuántas caben y el resto pasa de página en vez de quedar tapado. */
.tac-materiales { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 40px; gap: 6px; }
.tac-material { box-sizing: border-box; height: 40px; min-width: 0; padding-top: 4px; padding-bottom: 4px; }

/* D-PUL-TAC-7 — el nombre del hueco vacío una sola vez: debajo en pantallas altas, dentro en las bajas (donde el de
   debajo se oculta). */
.tac-lado .ui-casilla__hueco { visibility: hidden; }
@media (max-height: 820px) { .tac-lado .ui-casilla__hueco { visibility: visible; } }

/* D-PUL-TAC-9 — el lore del elegido acaba en puntos suspensivos, no a media línea. */
.tac-elegido p { max-height: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; }

@media (max-width: 1000px) { .tac-caja-materiales { flex: none; height: 300px; } }

/* ───────── D-INVENTARIO-COMBATE D-INV-3 — la ventana de la I (la vista de Tácticas, pestaña Personaje) ───────── */
.inv-ventana { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.inv-ventana__panel { width: min(1400px, 100%); height: min(860px, 100%); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(20,14,8,.97), rgba(10,7,4,.98)); border: 1px solid rgba(200,168,96,.45); box-shadow: 0 18px 60px rgba(0,0,0,.7); }
.inv-ventana__cabecera { flex: none; }
.inv-ventana__ayuda { margin-left: auto; font-size: 12px; opacity: .7; font-family: var(--ui-fuente-texto) !important; }
.inv-ventana__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 14px; overflow: hidden; }
.inv-ventana .tac-cabecera > :not(.tac-grupo) { display: none; }
.inv-ventana__bolsas:empty { display: none; }
.inv-ventana__bolsas { flex: none; padding: 0 14px 8px; max-height: 28%; overflow-y: auto; }
.inv-bolsa { padding: 6px 10px; margin-top: 6px; border: 1px solid rgba(200,168,96,.3); border-radius: 4px; background: rgba(0,0,0,.35);
  font-family: var(--ui-fuente-texto) !important; font-size: 13px; }
.inv-bolsa__nombre { color: #e9c46a; font-weight: 600; }
.inv-bolsa__lejos { opacity: .65; font-style: italic; }
.inv-bolsa__lista { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.inv-bolsa__recoger { margin-left: 4px; padding: 1px 8px; border-radius: 3px; border: 1px solid rgba(200,168,96,.5); background: rgba(90,24,16,.6); color: #fff3c4; cursor: pointer; }
.inv-bolsa__recoger:hover { background: rgba(154,44,28,.8); }
@media (max-width: 760px) { .inv-ventana { padding: 0; } .inv-ventana__panel { height: 100%; overflow-y: auto; } .inv-ventana__cuerpo { overflow: visible; } }

/* ───────── D-TACTICAS-HABILIDADES (claude/_CLAUDE_D_TACTICAS_HABILIDADES_MESA.md) — Habilidades: libro abierto + IA ─────────
   Letra de 13 px como mínimo (Miguel: «demasiado texto pequeño»); iconos pintados de cada habilidad; sin scroll de página. */

.tac-habilidades:has(> .th-raiz) { overflow: hidden; display: flex; flex-direction: column; }
.th-raiz { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; color: var(--ui-tinta-1); }
.tac-raiz .th-raiz, .tac-raiz .th-raiz * { font-family: var(--ui-fuente-texto) !important; }
.tac-raiz .th-raiz :is(.th-cabeza__nombre, .th-estilo b, .th-barra__rotulo, .th-cuando__rotulo) { font-family: var(--ui-fuente-titulo) !important; }
.th-sub { flex: none; }
.th-sub .ui-pestana { font-size: 15px; padding: 7px 18px; }

/* Libro: líneas a la izquierda, la elegida en grande a la derecha */
.th-libro { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 30%) minmax(0, 1fr); gap: 12px; }
.th-lineas { min-height: 0; display: grid; grid-template-rows: repeat(var(--th-filas), minmax(0, 58px)); align-content: start; gap: 4px; }
.th-linea {
  min-height: 0; display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 5px; text-align: left; cursor: pointer;
  color: var(--ui-tinta-1); background: rgba(10, 13, 20, 0.72); border: 1px solid var(--ui-linea); border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.th-linea:hover { border-color: var(--ui-acento); }
.th-linea--sel { border-color: var(--ui-acento); background: linear-gradient(90deg, rgba(200, 168, 96, .22), rgba(10, 13, 20, .72)); box-shadow: 0 0 10px var(--ui-acento-brillo); }
.th-linea--apagada { opacity: .5; }
.th-linea--apagada .th-linea__icono { filter: grayscale(1); }
.th-linea__icono { flex: none; height: 100%; max-height: 48px; aspect-ratio: 1; border-radius: 7px; object-fit: cover; }
.th-icono--hueco { display: inline-block; background: var(--ui-fondo-2); border: 1px dashed var(--ui-linea); }
.th-linea__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.th-linea__texto b { font-size: 15px; font-weight: 600; color: var(--ui-tinta-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-linea__texto small { font-size: 13px; color: var(--ui-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-linea__marca { flex: none; min-width: 26px; height: 26px; padding: 0 5px; display: grid; place-items: center; border-radius: 13px; font-style: normal; font-size: 13px; font-weight: 700; color: #1a1206; background: var(--ui-acento); }
.th-linea__marca--mano { color: var(--ui-tinta-0); background: rgba(80, 110, 160, .55); }

.th-detalle { min-height: 0; overflow: hidden; padding: 16px 20px; border: 1px solid var(--ui-linea); border-radius: 10px; background: linear-gradient(180deg, rgba(16, 20, 29, .94), rgba(8, 10, 15, .96)); }
.th-ficha-grande { display: flex; flex-direction: column; gap: 12px; }
.th-cabeza { display: flex; align-items: center; gap: 16px; }
.th-cabeza__icono { flex: none; width: 84px; height: 84px; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 2px var(--ui-acento), 0 0 18px var(--ui-acento-brillo); }
.th-cabeza__nombre { margin: 0; font-size: 26px; font-weight: 700; color: var(--ui-acento); letter-spacing: .04em; }
.th-cabeza__linea { margin: 2px 0 0; font-size: 15px; color: var(--ui-tinta-2); }
.th-explica { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ui-tinta-0); }
.th-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.th-etiqueta { display: inline-flex; flex-direction: column; padding: 5px 11px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ui-tinta-0); background: var(--ui-fondo-2); border: 1px solid var(--ui-linea); }
.th-etiqueta small { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-tinta-3); }
.th-rangos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.th-rangos__flecha { color: var(--ui-tinta-3); font-size: 14px; }
.th-rango { padding: 4px 9px; border-radius: 6px; font-size: 14px; cursor: pointer; color: var(--ui-tinta-1); background: transparent; border: 1px solid var(--ui-linea-suave); }
.th-rango small { font-size: 13px; color: var(--ui-tinta-3); }
.th-rango--actual { border-color: var(--ui-acento); color: var(--ui-acento); }
.th-rango--ver { background: rgba(200, 168, 96, .18); }
.th-rango--falta { opacity: .5; }
.th-nota { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ui-tinta-2); }
.th-nota--aviso { color: #e0a040; }
.th-gemas-poner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--ui-tinta-2); }
.th-poner { width: 36px; height: 36px; border-radius: 50%; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--ui-tinta-0); background: var(--ui-fondo-2); border: 1px solid var(--ui-acento); }
.th-poner:hover, .th-poner--aqui { color: #1a1206; background: var(--ui-acento); }
.th-quitar { margin-left: 6px; padding: 6px 12px; border-radius: 6px; font-size: 14px; cursor: pointer; color: #f0b0a0; background: transparent; border: 1px solid rgba(220, 110, 90, .55); }
.th-cuando { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ui-linea-suave); }
.th-cuando__rotulo { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-acento); }
.th-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.th-ficha { padding: 6px 12px; border-radius: 16px; font-size: 14px; cursor: pointer; color: var(--ui-tinta-1); background: var(--ui-fondo-2); border: 1px solid var(--ui-linea); }
.th-ficha:hover:not(:disabled) { border-color: var(--ui-acento); }
.th-ficha--sel { color: #1a1206; font-weight: 700; background: var(--ui-acento); border-color: var(--ui-acento); }
.th-ficha--nunca.th-ficha--sel { color: #fff; background: #8a3424; border-color: #c0553f; }
.th-ficha:disabled { opacity: .45; cursor: default; }

/* Las 8 gemas y lo que va siempre a mano: barra fija debajo */
.th-barra { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; padding: 10px 14px; border: 1px solid var(--ui-linea); border-radius: 10px; background: rgba(8, 10, 15, .9); }
.th-barra__grupo { display: flex; flex-direction: column; gap: 6px; }
.th-barra__rotulo { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-acento); }
.th-barra__fila { display: flex; gap: 10px; }
.th-gema { position: relative; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; background: var(--ui-fondo-2); border: 2px solid var(--ui-acento); box-shadow: 0 0 10px var(--ui-acento-brillo); }
.th-gema__icono { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.th-gema--vacia { border-style: dashed; border-color: var(--ui-linea); box-shadow: none; }
.th-gema--mano { border-color: #5a7cb0; box-shadow: none; }
.th-gema__n { position: absolute; left: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border-radius: 11px; font-size: 13px; font-weight: 700; color: #1a1206; background: var(--ui-acento); }
.th-gema--vacia .th-gema__n { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); color: var(--ui-tinta-2); background: transparent; font-size: 17px; }
.th-gema--mano .th-gema__n { color: var(--ui-tinta-0); background: #3d5a88; }
.th-gema__memo { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-size: 14px; font-weight: 700; color: #bde0ff; background: rgba(5, 10, 20, .65); }
.th-gema__x { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; color: #fff; background: #8a3424; border: 1px solid #c0553f; opacity: 0; transition: opacity .15s; }
.th-gema:hover .th-gema__x, .th-gema__x:focus-visible { opacity: 1; }
.th-proximo { flex: 1; min-width: 180px; align-self: center; }

/* D-GEMAS-COMPANEROS (D-GC-2/3/8) — «Avanzado · Sus gemas» en Cómo actúa, y «Gemas · a mano» con «Volver al perfil» en la barra.
   A «Salón dorado»: acento dorado; B «Estandartes»: cinta carmesí. */
.th-avanzado { margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--ui-linea-suave); }
.th-avanzado .ui-pildora { font-size: 14px; }
.th-avanzado__rotulo { display: flex; align-items: center; gap: 10px; }
.th-avanzado__volver { padding: 0 9px; line-height: 13px; border-radius: 8px; font-size: 13px; letter-spacing: 0; text-transform: none; cursor: pointer; color: var(--ui-acento); background: transparent; border: 1px solid var(--ui-acento); }
.th-avanzado__volver:hover, .th-avanzado__volver:focus-visible { color: #1a1206; background: var(--ui-acento); }
.tac-raiz[data-estilo="B"] .th-avanzado { border-top: 2px solid rgba(154, 44, 28, .55); }
.tac-raiz[data-estilo="B"] .th-avanzado__volver { border-radius: 0; color: #fff3c4; background: linear-gradient(180deg, #9a2c1c, #5a1810); border-color: #e9c46a; }
.tac-raiz[data-estilo="B"] .th-avanzado__volver:hover, .tac-raiz[data-estilo="B"] .th-avanzado__volver:focus-visible { color: #1a1206; background: #e9c46a; }
.th-avanzado__volver:disabled { opacity: .45; cursor: default; pointer-events: none; }
/* D-COMPARADOR D-CMP-4 — «Cómo valora el equipo»: cuatro barras de 10 segmentos (un clic pone el valor; el 0 a la izquierda) */
.th-cmp { flex-direction: column; align-items: stretch; gap: 6px; }
.th-cmp__barras { display: flex; flex-direction: column; gap: 4px; }
.th-cmp__fila { display: grid; grid-template-columns: 120px 22px 1fr 34px; align-items: center; gap: 6px; }
.th-cmp__nombre { font-size: 14px; color: var(--ui-tinta); }
.th-cmp__cero { width: 22px; height: 18px; padding: 0; font-size: 13px; line-height: 16px; cursor: pointer; color: var(--ui-tinta-2); background: transparent; border: 1px solid var(--ui-linea-suave); border-radius: 4px; }
.th-cmp__barra { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.th-cmp__seg { height: 14px; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .06); border: 1px solid var(--ui-linea-suave); border-radius: 2px; }
.th-cmp__seg--lleno { background: var(--ui-acento); border-color: var(--ui-acento); }
.th-cmp__seg--medio { background: linear-gradient(90deg, var(--ui-acento) 50%, rgba(255, 255, 255, .06) 50%); border-color: var(--ui-acento); }
.th-cmp__seg:hover, .th-cmp__cero:hover { outline: 1px solid var(--ui-acento); }
.th-cmp__valor { font-size: 13px; text-align: right; color: var(--ui-tinta-2); }
.tac-raiz[data-estilo="B"] .th-cmp__seg--lleno { background: #9a2c1c; border-color: #e9c46a; }
.tac-raiz[data-estilo="B"] .th-cmp__seg--medio { background: linear-gradient(90deg, #9a2c1c 50%, rgba(255, 255, 255, .06) 50%); border-color: #e9c46a; }

/* Cómo actúa: el estilo en tarjetas, el modo en píldoras y una fila por habilidad */
.th-ia { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.th-ia__cabeza { display: flex; flex-direction: column; gap: 8px; }
.th-estilos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.th-estilo { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; cursor: pointer; border-radius: 10px; color: var(--ui-tinta-1); background: rgba(10, 13, 20, .78); border: 1px solid var(--ui-linea); }
.th-estilo b { font-size: 18px; color: var(--ui-tinta-0); }
.th-estilo span { font-size: 14px; line-height: 1.35; color: var(--ui-tinta-2); }
.th-estilo:hover { border-color: var(--ui-acento); }
.th-estilo--sel { border-color: var(--ui-acento); background: linear-gradient(180deg, rgba(200, 168, 96, .2), rgba(10, 13, 20, .78)); box-shadow: 0 0 12px var(--ui-acento-brillo); }
.th-estilo--sel b { color: var(--ui-acento); }
.th-modo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-modo .ui-pildora { font-size: 14px; }
/* Si en una pantalla muy baja no caben todas las filas, se desplaza esta lista (y no la página). */
.th-ia__filas { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; align-content: start; gap: 6px 14px; }
.th-ia-fila { display: grid; grid-template-columns: 40px minmax(90px, 24%) minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 8px; background: rgba(10, 13, 20, .6); border: 1px solid var(--ui-linea-suave); }
.th-ia-fila__icono { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; }
.th-ia-fila__nombre { font-size: 15px; font-weight: 600; color: var(--ui-tinta-0); }
.th-ia-fila .th-fichas { gap: 4px; }
.th-ia-fila .th-ficha { padding: 4px 10px; font-size: 13px; }

@media (max-height: 820px) {
  .th-lineas { grid-template-rows: repeat(var(--th-filas), minmax(0, 46px)); }
  .th-cabeza__icono { width: 64px; height: 64px; }
  .th-cabeza__nombre { font-size: 21px; }
  .th-explica { font-size: 15px; }
  .th-detalle { padding: 10px 14px; }
  .th-ficha-grande { gap: 8px; }
  .th-gema { width: 48px; height: 48px; }
  .th-barra { padding: 6px 10px; }
  .th-estilo { padding: 8px 10px; }
  .th-estilo span { font-size: 13px; }
  .th-ia { gap: 6px; }
  .th-ia-fila { grid-template-columns: 32px minmax(90px, 24%) minmax(0, 1fr); padding: 3px 8px 3px 4px; }
  .th-ia-fila__icono { width: 32px; height: 32px; }
  .th-ia-fila .th-ficha { padding: 3px 9px; }
}
@media (max-width: 1000px) {
  .tac-habilidades:has(> .th-raiz) { overflow: visible; }
  .th-libro { grid-template-columns: 1fr; }
  .th-lineas { grid-template-rows: none; grid-auto-rows: 52px; }
  .th-ia__filas { grid-template-columns: 1fr; }
  .th-barra__fila { flex-wrap: wrap; }
}

/* D-SMOKE-9 D-SM9-9 — la tira de Apenao en su ficha: lo que le llevas, para entregárselo aquí */
.tac-apenao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 6px 8px; border: 1px solid rgba(255, 214, 120, 0.45); border-radius: 8px; background: rgba(255, 214, 120, 0.08); }
.tac-apenao__texto { font-size: 13px; color: #f3d48d; }

/* D-ECONOMIA D-ECO-3a/3b (adenda A-6, Q-4) — la pestaña Maestro: lecciones y pergaminos en dos columnas; cada fila nombre · valor · precio · botón */
.tac-maestro { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.tac-maestro__cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; margin-top: 8px; align-items: start; }
.tac-maestro__seccion { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tac-maestro__titulo { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-acento-luz); }
.tac-maestro__lista { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tac-maestro__fila { display: grid; grid-template-columns: minmax(0, 1fr) 62px 56px auto auto; align-items: center; gap: 8px;
  padding: 4px 6px 4px 10px; border: 1px solid var(--ui-linea-suave); border-radius: 6px; background: var(--ui-fondo-2); }
.tac-maestro__fila:hover { border-color: var(--ui-linea); }
.tac-maestro__fila--nueva { border-color: rgba(163, 230, 53, 0.45); }
.tac-maestro__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ui-tinta-1); }
.tac-maestro__nivel { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ui-tinta-2); }
.tac-maestro__precio { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ui-acento); }
.tac-maestro__fila .ui-boton { padding: 3px 10px; font-size: 12.5px; white-space: nowrap; }
.tac-raiz :is(.tac-maestro__nombre, .tac-maestro__nivel, .tac-maestro__precio) { font-family: var(--ui-fuente-texto) !important; }
.tac-raiz .tac-maestro__titulo { font-family: var(--ui-fuente-titulo) !important; }
@media (max-width: 1000px) {
  .tac-maestro { flex: none; overflow: visible; }
  .tac-maestro__cuerpo { grid-template-columns: 1fr; }
}