/* Página "Sitio en construcción": visor estilo software de elementos finitos */

:root {
  --brand: #0056d2;
  --brand-hover: #0047ae;
  --link: #0056d2;
  --text: #29323d;
  --text-soft: #4a5561;
  --heading: #1b2328;
  --panel: rgb(255 255 255 / .82);
  --panel-border: #d4dadb;
  --field-bg: #ffffff;
  --input: #a7adb4;
  --radius: 0.5rem;
  --viewport-bg: linear-gradient(180deg, #c3d2e5 0%, #e3eaf3 55%, #f5f8fb 100%);
  --err: #c62828;
  color-scheme: light;
}
.dark {
  --link: #8fbaf0;
  --text: #b6bbc3;
  --text-soft: #a9b1b7;
  --heading: #f5f7fa;
  --panel: rgb(36 37 38 / .85);
  --panel-border: #383b3e;
  --field-bg: #1d1e1f;
  --input: #4a4e52;
  --viewport-bg: linear-gradient(180deg, #1b2536 0%, #121822 55%, #0d1015 100%);
  --err: #ff8a80;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Inter, sans-serif;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--viewport-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid #4288c9; outline-offset: 3px; }

.viewport {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

/* Barra superior: marca + datos del "estudio" */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.9rem clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand img { width: 22px; height: 30px; }
.brand__name { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--heading); }
.brand__name span { color: var(--link); }
.study {
  margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  font: 0.78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-soft);
}
.study b { color: var(--heading); font-weight: 600; }

/* Zona del modelo */
.stage { position: relative; min-height: 22rem; }
.fea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.legend {
  position: absolute; top: 1.25rem; right: clamp(1rem, 3vw, 2rem);
  padding: 0.75rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  font: 0.72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--heading);
}
.legend__title { margin: 0 0 0.6rem; font-family: Inter, sans-serif; font-weight: 600; font-size: 0.78rem; }
.legend__title small { font-weight: 400; color: var(--text-soft); }
.legend__body { display: flex; gap: 0.5rem; }
.legend__bar {
  width: 14px; height: 200px;
  border: 1px solid rgb(0 0 0 / .45);
  /* 9 bandas, rojo arriba (máximo) y azul abajo (mínimo); se completa desde JS */
}
.legend__ticks {
  list-style: none; margin: -0.4em 0; padding: 0; height: calc(200px + 0.8em);
  display: flex; flex-direction: column; justify-content: space-between;
  white-space: nowrap;
}
.legend__ticks .max { color: #d32f2f; font-weight: 700; }
.legend__ticks .min { color: #1e63d6; font-weight: 700; }

.triad {
  position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: 1rem;
  width: 56px; height: 56px;
  font: 700 11px Inter, sans-serif; fill: var(--heading);
}

/* Acceso */
.access {
  padding: 1.25rem clamp(1rem, 4vw, 2rem) 1.75rem;
  border-top: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(8px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.access__lead { margin: 0; max-width: 34rem; color: var(--text); font-size: 0.975rem; line-height: 1.55; }
.access__form { display: flex; flex-direction: column; gap: 0.4rem; }
.access__title { margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.access__row { display: flex; gap: 0.5rem; }
.access input {
  font: inherit; font-size: 1rem; color: var(--heading);
  width: 13rem; min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--input); border-radius: var(--radius);
  background: var(--field-bg);
}
.access input:focus { outline: 2px solid #4288c9; outline-offset: 0; border-color: #4288c9; }
.access input[aria-invalid="true"] { border-color: var(--err); }
.access button {
  font: inherit; font-weight: 600; font-size: 1rem;
  padding: 0.65rem 1.25rem; min-height: 2.75rem;
  border: 0; border-radius: var(--radius);
  background: var(--brand); color: #fff; cursor: pointer;
}
.access button:hover { background: var(--brand-hover); }
.access__error { margin: 0; color: var(--err); font-size: 0.9rem; font-weight: 500; }

@media (max-width: 699px) {
  .study { display: none; }
  .legend { top: 0.75rem; right: 0.75rem; padding: 0.5rem 0.6rem; font-size: 0.62rem; }
  .legend__title { font-size: 0.66rem; margin-bottom: 0.4rem; }
  .legend__bar { width: 10px; height: 110px; }
  .legend__ticks { height: calc(110px + 0.8em); }
  .triad { width: 44px; height: 44px; bottom: 0.5rem; }
  .access__form, .access__row { width: 100%; }
  .access input { flex: 1; width: auto; }
}