/* 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; }
.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; }
.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%; }
.tac-lado { position: absolute; top: 64px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; --ui-lado: 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); }
.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; }

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