/* ═══ Shell ═══════════════════════════════════════════════════════════════ */
.shell {
  display: flex;
  min-height: 100vh;
}

/* ═══ Sidebar ══════════════════════════════════════════════════════════════ */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 220px;
  flex: none;
  background: linear-gradient(165deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow: hidden;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(169, 183, 196, .12);
  flex: none;
}
.sidebar__logo { font-size: 1.35rem; flex: none; line-height: 1; }
.sidebar__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2eaf0;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.sidebar__nav {
  flex: 1;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 13px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--side-ink);
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nav-item:hover { background: rgba(169, 183, 196, .12); color: #e2eaf0; }
.nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(77, 184, 216, .6); }
.nav-item--active {
  background: rgba(29, 116, 171, .22);
  color: #e2eaf0;
}
.nav-icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.nav-icon svg { display: block; }
.nav-label { letter-spacing: 0.01em; }

.sidebar__foot {
  padding: 14px 20px;
  border-top: 1px solid rgba(169, 183, 196, .12);
  flex: none;
}
/* #sidebar-back-link reutiliza .nav-item tal cual (mismo look que Bienvenida/
   Proyectos/Configuración); el margen negativo compensa que .sidebar__foot
   tiene más padding horizontal que .sidebar__nav, para que quede alineado. */
#sidebar-back-link {
  margin: 0 -10px 8px;
  text-decoration: none;
}
/* .nav-item y .babel-language-switcher fijan su propio display: flex, que por
   especificidad de CSS le gana al display:none por defecto del atributo
   hidden — sin esto, marcar hidden en estos dos no ocultaba nada. */
.nav-item[hidden] { display: none; }
.sidebar__ver { font-size: 0.74rem; color: rgba(169, 183, 196, .5); }

.babel-language-switcher { display: flex; gap: 6px; margin: 4px 0 10px; }
.babel-language-switcher[hidden] { display: none; }
.babel-language-switcher .lang-btn {
  flex: 1;
  background: rgba(169, 183, 196, .08);
  border: 1px solid rgba(169, 183, 196, .18);
  color: rgba(226, 234, 240, .75);
  border-radius: 6px;
  padding: 5px 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all .14s;
}
.babel-language-switcher .lang-btn:hover { border-color: rgba(169, 183, 196, .35); color: #e2eaf0; }
.babel-language-switcher .lang-btn.active {
  background: rgba(77, 184, 216, .18);
  border-color: rgba(77, 184, 216, .6);
  color: #e2eaf0;
}

/* ═══ Main area ════════════════════════════════════════════════════════════ */
.main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px),
    var(--paper);
  display: flex;
  flex-direction: column;
}
.main::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-margin);
  pointer-events: none;
  z-index: 0;
}
#app {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.test-runtime {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Pantallas de test inyectadas directamente: dar padding como hacía el viejo .app */
#app > .screen,
.test-runtime > .screen { padding: 24px; width: 100%; }
#app > .screen--trial,
.test-runtime > .screen--trial { flex: 1; padding: 8px 24px 16px; }
#app > .screen--tmt,
#app > .screen--digital-maze,
#app > .screen--pd-sheet,
#app > .screen--claves-sheet,
.test-runtime > .screen--tmt,
.test-runtime > .screen--digital-maze,
.test-runtime > .screen--pd-sheet,
.test-runtime > .screen--claves-sheet { padding: 0; }

/* ═══ Topbar ════════════════════════════════════════════════════════════════ */
.topbar {
  height: 58px;
  width: 100%;
  align-self: stretch;
  flex: none;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(31, 42, 51, .06);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.crumbs__sep {
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0 4px;
  user-select: none;
}
.crumbs__cur {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.crumbs button {
  background: none;
  border: none;
  padding: 5px 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.crumbs button:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.topbar__ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.topbar__ctx .btn {
  padding: 7px 16px;
  font-size: 0.875rem;
}

/* ── Topbar participante ─────────────────────────────────────────────────── */
.topbar--participant {
  padding-inline: 24px;
}
.pa-topbar__left {
  display: flex;
  align-items: center;
  min-width: 0;
}
.pa-topbar__back {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: background 0.12s, color 0.12s;
}
.pa-topbar__back:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.pa-topbar__back:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.pa-topbar__sep {
  width: 1px;
  height: 28px;
  background: var(--line);
  margin: 0 14px;
  flex: none;
}
.pa-topbar__identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.pa-topbar__project {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--navy-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.pa-topbar__code {
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.pa-topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.pa-topbar__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px 9px 16px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--side-bg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.005em;
  box-shadow: 0 2px 10px rgba(13, 23, 34, .25);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.pa-topbar__cta:hover {
  background: #1e3040;
  box-shadow: 0 4px 16px rgba(13, 23, 34, .32);
  transform: translateY(-1px);
}
.pa-topbar__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(13, 23, 34, .2);
}
.pa-topbar__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.pa-topbar__cta svg { flex: none; }

/* ═══ Content ════════════════════════════════════════════════════════════════ */
.content {
  padding: 24px 32px 40px;
  max-width: 880px;
  width: 100%;
  align-self: stretch;
  margin: 0 auto;
  flex: 1;
}
.content--wide { max-width: 1060px; }

.page-head { margin-bottom: 20px; }
.page-head h1 { margin: 0 0 4px; font-size: 1.45rem; letter-spacing: -0.01em; }
.page-head--split { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-head--split h1 { margin: 0; }
.page-head .muted { margin: 0; font-size: 0.9rem; }

/* ═══ Layout helpers ═══════════════════════════════════════════════════════ */
.split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
.split--rev {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
.split--even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.aside-sticky { position: sticky; top: 68px; }