#app { height: 100%; }

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 224px;
  flex-shrink: 0;
  background: #211d17;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) 0;
}

.sidebar-logo {
  display: block;
  width: 68px;
  height: auto;
  margin: 0 auto var(--sp-3);
}

.sidebar-usuario {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--fs-small);
  color: #c7cad1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--sp-3);
}

.sidebar ul { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 2px; }

.sidebar-link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: #dcdde3;
  font-size: var(--fs-small);
  font-weight: 500;
  border-left: 3px solid transparent;
}

.sidebar-link:hover { background: rgba(255, 255, 255, 0.08); }

.btn-salir {
  margin: var(--sp-3) var(--sp-4) 0;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #dcdde3;
  border-radius: var(--r-md);
  padding: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

.btn-salir:hover {
  border-color: var(--color-primario);
  color: #fff;
}

.version-badge {
  position: fixed;
  bottom: var(--sp-2);
  right: var(--sp-3);
  font-size: 0.7em;
  font-weight: 600;
  color: var(--color-texto-suave);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  z-index: 200;
  pointer-events: none;
}

.main {
  flex: 1;
  min-width: 0;
}

.contenido {
  padding: var(--sp-6) var(--sp-8);
  max-width: 1100px;
}

.selector-local {
  margin: 0 var(--sp-4) var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--fs-small);
}

@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: var(--sp-2); }
  .sidebar ul { display: flex; flex-direction: row; }
  .sidebar-link { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .sidebar-usuario, .selector-local, .btn-salir, .sidebar-logo { display: none; }
  .contenido { padding: var(--sp-4); }
}