/* Fábrica — oficina isométrica. Estilos propios, sobre los tokens de design.css. */

body {
  background: var(--bg, #000000);
  color: var(--on-surface, #e2e2e2);
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  overflow: hidden;            /* el lienzo no hace scroll de pagina */
  overscroll-behavior: none;
}

#app { min-height: 100vh; }

/* La página ocupa el viewport completo: el lienzo necesita alto real. */
.fab-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;              /* en móvil, descuenta la barra del navegador */
  box-sizing: border-box;
  overflow: hidden;
}

/* ── cabecera ─────────────────────────────────────────────────────────── */

.fab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
  flex-shrink: 0;
}
.fab-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-surface, #e2e2e2);
}
.fab-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--on-surface-variant, #cac4d4);
  line-height: 1.4;
}
.fab-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.fab-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-container, #1f1f1f);
  border: 1px solid var(--outline-variant, #494552);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant, #cac4d4);
  white-space: nowrap;
}
.fab-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--outline, #948e9d);
  flex-shrink: 0;
}
.fab-live.activo { border-color: var(--tertiary, #dbc839); color: var(--tertiary, #dbc839); }
.fab-live.activo .fab-live-dot {
  background: var(--tertiary, #dbc839);
  animation: fab-pulso 1.6s ease-in-out infinite;
}
.fab-live.pausado { opacity: 0.55; }

@keyframes fab-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(219, 200, 57, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(219, 200, 57, 0); }
}

.fab-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-container, #1f1f1f);
  border: 1px solid var(--outline-variant, #494552);
  color: var(--on-surface-variant, #cac4d4);
  cursor: pointer;
  flex-shrink: 0;
}
.fab-icon-btn:hover { background: var(--surface-high, #2a2a2a); }
.fab-icon-btn .material-symbols-outlined { font-size: 19px; }
.fab-icon-btn[aria-pressed="true"] {
  color: var(--tertiary, #dbc839);
  border-color: var(--tertiary, #dbc839);
}

/* ── chips de departamento ────────────────────────────────────────────── */

.fab-chips {
  display: flex;
  gap: 0.4rem;
  padding: 0 1.5rem 0.75rem;
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.fab-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-container, #1f1f1f);
  border: 1px solid var(--outline-variant, #494552);
  color: var(--on-surface-variant, #cac4d4);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease;
}
.fab-chip:hover { background: var(--surface-high, #2a2a2a); }
.fab-chip.activo {
  background: var(--surface-high, #2a2a2a);
  color: var(--on-surface, #e2e2e2);
  font-weight: 600;
}
.fab-chip-punto {
  width: 8px; height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.fab-chip-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.05rem 0.3rem;
  border-radius: 5px;
  background: var(--surface-highest, #353535);
  color: var(--on-surface, #e2e2e2);
}
.fab-chip-caido { border-color: var(--error, #ffb4ab); }

/* ── lienzo ───────────────────────────────────────────────────────────── */

.fab-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 1rem 1rem;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--outline-variant, #494552);
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, var(--surface-low, #1b1b1b) 0%, var(--bg, #000) 100%);
  overflow: hidden;
  touch-action: none;          /* el pan/zoom lo maneja el JS */
}

.fab-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.fab-svg.arrastrando { cursor: grabbing; }

/* Los rótulos de agente sólo aparecen cuando hay zoom suficiente para leerlos. */
/* El halo (stroke por debajo del relleno) deja el rótulo legible cuando cae
   encima de un escritorio o del piso de la zona. */
.fab-rotulo {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;   /* debe coincidir con FUENTE_ROTULO en fabrica.js */
  font-weight: 500;
  fill: var(--on-surface-variant, #cac4d4);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--surface, #141218);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}
/* El rótulo que se muestra al pasar el cursor pesa más que los permanentes. */
.fab-rotulo-hover {
  fill: var(--on-surface, #e6e0e9);
  font-weight: 700;
}

.fab-zona-rotulo {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-anchor: middle;
  pointer-events: none;
}
.fab-zona-conteo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  fill: var(--on-surface-variant, #cac4d4);
  text-anchor: middle;
  pointer-events: none;
}

.fab-escritorio { cursor: pointer; }
.fab-escritorio .fab-hit { fill: transparent; }
.fab-escritorio:hover .fab-cara-top { stroke: var(--on-surface, #e2e2e2); stroke-width: 1.2; }
.fab-escritorio.sel .fab-cara-top { stroke: var(--primary, #cebdff); stroke-width: 1.6; }

.fab-pulso { pointer-events: none; }
.fab-pulso-anillo { animation: fab-latido 1.8s ease-out infinite; }
@keyframes fab-latido {
  0%   { transform: scale(0.5); opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-live.activo .fab-live-dot { animation: none; }
  .fab-pulso-anillo { animation: none; opacity: .75; }
  .fab-spin { animation: none; }
}

/* ── controles flotantes ──────────────────────────────────────────────── */

.fab-controles {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--glass-bg, rgba(0,0,0,0.85));
  border: 1px solid var(--outline-variant, #494552);
  backdrop-filter: blur(8px);
}
.fab-ctrl {
  display: flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 0.4rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--on-surface-variant, #cac4d4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.fab-ctrl:hover { background: var(--surface-high, #2a2a2a); color: var(--on-surface, #e2e2e2); }
.fab-ctrl .material-symbols-outlined { font-size: 18px; }
.fab-ctrl-zoom { min-width: 48px; color: var(--on-surface, #e2e2e2); }

/* ── leyenda ──────────────────────────────────────────────────────────── */

.fab-leyenda {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  max-width: calc(100% - 1.5rem);
}
.fab-leyenda-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--glass-bg, rgba(0,0,0,0.85));
  border: 1px solid var(--outline-variant, #494552);
  color: var(--on-surface-variant, #cac4d4);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.fab-leyenda-toggle .material-symbols-outlined { font-size: 15px; }
.fab-leyenda-cuerpo {
  display: none;
  margin-top: 0.4rem;
  padding: 0.75rem;
  border-radius: var(--radius-md, 12px);
  background: var(--glass-bg, rgba(0,0,0,0.9));
  border: 1px solid var(--outline-variant, #494552);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  line-height: 1.42;
  width: 300px;
  max-width: 100%;
  /* La leyenda explica el lienzo; no puede taparlo. Con tres bloques ya no cabe
     entera en pantallas bajas, así que se limita y se desplaza por dentro. */
  max-height: min(54vh, 400px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* La barra se deja siempre visible: con scrollbars superpuestas (macOS, móvil)
     el tercer bloque queda bajo el pliegue sin ninguna señal de que hay más. */
  scrollbar-width: thin;
  scrollbar-color: var(--outline, #948e9d) transparent;
}
.fab-leyenda-cuerpo::-webkit-scrollbar { width: 8px; }
.fab-leyenda-cuerpo::-webkit-scrollbar-thumb {
  background: var(--outline, #948e9d);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.fab-leyenda.abierta .fab-leyenda-cuerpo { display: block; }

.fab-ley-bloque + .fab-ley-bloque {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--outline-variant, #494552);
}
.fab-ley-bloque h4 {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-surface, #e2e2e2);
}

.fab-ley-depts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
}
.fab-ley-dept {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--on-surface-variant, #cac4d4);
}
.fab-ley-dept i {
  width: 9px; height: 9px;
  flex-shrink: 0;
  transform: rotate(45deg);
  border-radius: 1px;
}

.fab-ley-fila {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.fab-ley-fila:last-child { margin-bottom: 0; }
/* Un estado que ahora mismo no tiene a nadie se atenúa, no se esconde: sigue
   siendo parte del código de lectura aunque hoy esté vacío. */
.fab-ley-fila.vacia { opacity: 0.55; }

/* El glifo isométrico ocupa un ancho fijo para que los nombres de las cuatro
   filas queden alineados aunque los muebles tengan alturas distintas. */
.fab-ley-glifo {
  width: 34px;
  height: 27px;
  flex-shrink: 0;
  margin-top: 1px;
  overflow: visible;
}
.fab-ley-nombre { font-weight: 600; color: var(--on-surface, #e2e2e2); }
.fab-ley-conteo {
  color: var(--on-surface-variant, #cac4d4);
  font-variant-numeric: tabular-nums;
}
.fab-ley-desc { color: var(--on-surface-variant, #cac4d4); }

/* ── pista, carga, avisos ─────────────────────────────────────────────── */

.fab-pista {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--glass-bg, rgba(0,0,0,0.75));
  color: var(--on-surface-variant, #cac4d4);
  font-size: 0.6875rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s ease;
}
.fab-pista.oculta { opacity: 0; }

.fab-estado-carga {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--on-surface-variant, #cac4d4);
  font-size: 0.875rem;
  background: var(--bg, #000);
}
.fab-estado-carga[hidden] { display: none; }
.fab-spin { animation: fab-girar 1s linear infinite; }
@keyframes fab-girar { to { transform: rotate(360deg); } }

.fab-avisos {
  flex-shrink: 0;
  margin: 0 1rem 1rem;
  padding: 0.6rem 0.875rem;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-container, #1f1f1f);
  border: 1px solid var(--outline-variant, #494552);
  border-left: 3px solid var(--tertiary, #dbc839);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--on-surface-variant, #cac4d4);
}
.fab-avisos[hidden] { display: none; }
.fab-avisos p { margin: 0 0 0.25rem; }
.fab-avisos p:last-child { margin-bottom: 0; }
.fab-avisos .fab-aviso-error { color: var(--error, #ffb4ab); }

/* ── móvil ────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .fab-header { padding: 0.875rem 1rem 0.5rem; }
  .fab-title { font-size: 1.25rem; }
  .fab-chips { padding: 0 1rem 0.5rem; }
  .fab-canvas-wrap { margin: 0 0.5rem 0.5rem; }
  .fab-pista { display: none; }
  /* En móvil manda el ancho disponible, no los 290px de escritorio. */
  .fab-leyenda-cuerpo { width: auto; max-height: 48vh; }
}

@media (max-width: 640px) {
  .fab-header { flex-wrap: wrap; }
  .fab-header-right { width: 100%; justify-content: space-between; }
  .fab-subtitle { font-size: 0.75rem; }
}