/* base.css — reset mínimo + variables de branding Triumph.
   Un fichero por componente en components/; aquí solo lo global. */

:root {
  /* Paleta de branding (provisional; se afina en el change de UI) */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-border: #d7dbe0;
  --color-text: #1c2530;
  --color-accent: #d8232a;      /* rojo Triumph (provisional) */
  --color-3d-bg: #e9edf1;
  --color-plan-bg: #ffffff;
  --color-plan-grid: #e2e6ea;
  --color-plan-module: #b9c2cc;
  --color-plan-module-stroke: #46525f;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-bg);
}

/* Layout del esqueleto: dos vistas del mismo estado, lado a lado. */
#app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

#viewer-3d,
#viewer-2d {
  position: relative;
  height: 100%;
  min-width: 0;
}

#viewer-3d {
  flex: 1 1 60%;
  background: var(--color-3d-bg);
}

#viewer-2d {
  flex: 1 1 40%;
  background: var(--color-plan-bg);
  border-left: 1px solid var(--color-border);
}

#viewer-3d canvas,
#viewer-2d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Etiqueta discreta de cada vista (solo esqueleto). */
.view-label {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.55;
  pointer-events: none;
}