:root {
  --bg: #eef1f4;
  --panel: #ffffff;
  --ink: #1e2a36;
  --muted: #76838f;
  --line: #e7ebf0;
  --brand: #2b6cb0;
}

* { box-sizing: border-box }
body { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px }
[hidden] { display: none !important }

#boot-splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); flex-direction: column; gap: 14px }
#boot-splash .spin { width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--line) }
#vista { padding: 24px }