:root { --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #e8ecf6; font: 14px/1.45 var(--font); touch-action: none; user-select: none; }
.hidden { display: none !important; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#arVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
body.ar { background: transparent; }

#labels { position: fixed; inset: 0; pointer-events: none; }
.lbl { position: absolute; transform: translate(-50%, -150%); font: 600 10.5px var(--font); letter-spacing: .08em; color: rgba(230,236,255,.85); text-shadow: 0 0 6px #000, 0 0 2px #000; white-space: nowrap; pointer-events: auto; padding: 4px 6px; }
.lbl.small { font-size: 9px; color: rgba(200,210,235,.7); }

.loading { position: fixed; inset: 0; z-index: 50; background: #030712; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: opacity .6s; }
.loading img { width: 90px; animation: spin 6s linear infinite; }
.loading .bar { width: 160px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #06b6d4, #8b5cf6); transition: width .2s; }
.loading.out { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.hud { position: fixed; left: 0; right: 0; z-index: 10; padding: 10px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud.top { top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding-top: max(10px, env(safe-area-inset-top)); }
.hud.bottom { bottom: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.glass, .date, .tools button, .time, .chips button, .info { background: rgba(8,12,28,.62); border: 1px solid rgba(140,160,220,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.date { border-radius: 12px; padding: 6px 10px; }
.date b { font-family: var(--font); font-size: 12.5px; display: block; }
.date small { color: #8e98b3; font-size: 11px; }
.tools { display: flex; gap: 6px; }
.tools button { width: 38px; height: 38px; border-radius: 12px; color: #8e98b3; font: 600 12px var(--font); cursor: pointer; }
.tools button.on { color: #06b6d4; border-color: rgba(6,182,212,.5); }
.tools button.ar { color: #fff; background: linear-gradient(135deg, #06b6d4, #8b5cf6); border: 0; }
.time { display: flex; align-items: center; gap: 6px; border-radius: 14px; padding: 6px; margin-bottom: 8px; overflow-x: auto; }
.time > button { background: rgba(255,255,255,.06); border: 0; color: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; cursor: pointer; flex: none; }
#btnPlay { width: 36px; font-size: 14px; }
.speeds { display: flex; gap: 4px; }
.speeds button { background: none; border: 1px solid transparent; color: #8e98b3; border-radius: 9px; padding: 5px 8px; font: 12px inherit; white-space: nowrap; cursor: pointer; }
.speeds button.on { color: #06b6d4; border-color: rgba(6,182,212,.4); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; display: flex; align-items: center; gap: 6px; border-radius: 20px; padding: 6px 11px 6px 7px; color: #e8ecf6; font: inherit; font-size: 12.5px; cursor: pointer; }
.chips button i { width: 14px; height: 14px; border-radius: 50%; background-size: cover; background-position: center; }
.chips button.on { border-color: #06b6d4; box-shadow: 0 0 12px rgba(6,182,212,.4); }

.info { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 20; border-radius: 18px; max-height: 58vh; display: flex; flex-direction: column; transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.info.open { transform: none; }
.info .grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 8px auto 2px; }
.info-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; }
.info-head h2 { margin: 0; font: 600 17px var(--font); letter-spacing: .03em; }
.info-head small { color: #8e98b3; }
.info-head button { margin-left: auto; background: none; border: 0; color: #8e98b3; font-size: 18px; padding: 6px; cursor: pointer; }
.swatch { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 14px rgba(255,255,255,.2); flex: none; }
.info-body { overflow-y: auto; padding: 0 14px 14px; font-size: 14px; }
.info-body p { margin: 0 0 10px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px; }
.stats div { background: rgba(255,255,255,.04); border: 1px solid rgba(140,160,220,.15); border-radius: 10px; padding: 7px 9px; }
.stats small { display: block; color: #8e98b3; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.stats b { font-size: 12.5px; font-weight: 400; }
.fact { border-left: 3px solid #8b5cf6; background: rgba(139,92,246,.08); padding: 8px 10px; border-radius: 0 10px 10px 0; margin-bottom: 10px; }
.obs { border-left: 3px solid #06b6d4; background: rgba(6,182,212,.08); padding: 8px 10px; border-radius: 0 10px 10px 0; }
.credit { color: #5d6680; font-size: 10.5px; margin-top: 10px; }

.ar-ui { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 14px max(16px, env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); }
.ar-ui p { margin: 0 0 10px; font-size: 14px; text-shadow: 0 0 6px #000; }
.ar-ui .row { display: flex; gap: 8px; justify-content: center; }
.ar-ui button { background: rgba(8,12,28,.75); border: 1px solid rgba(140,160,220,.35); color: #fff; border-radius: 14px; padding: 10px 14px; font: inherit; cursor: pointer; }
body.ar .hud.top .date, body.ar .hud.bottom .chips { display: none; }
body.ar .hud.bottom { bottom: 86px; }

/* ---- modo inspección ---- */
.insp-bar { position: fixed; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top)); z-index: 15; display: none; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(8,12,28,.62); border: 1px solid rgba(140,160,220,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.inspect .insp-bar { display: flex; }
body.inspect .hud.top, body.inspect .hud.bottom .time, body.inspect #labels { display: none !important; }
.insp-bar b { flex: 1; font-size: 16px; font-weight: 700; text-align: center; }
.insp-bar button { background: rgba(255,255,255,.06); border: 1px solid rgba(140,160,220,.25); color: #e8ecf6; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.insp-bar #inspBack { color: #06b6d4; font-weight: 600; }
.insp-tools { display: flex; gap: 6px; }
.insp-tools button.on { border-color: #06b6d4; color: #06b6d4; }

.chips button canvas.picon { flex: none; }

/* íconos Fluent 3D en lugar de emojis */
img.fi-in { width: auto; height: 1.3em; vertical-align: -0.3em; margin: 0 .06em; }

/* app «Sistema Solar RA»: volver al inicio */
.back-app { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(120,140,200,.3); background: rgba(10,16,34,.7); color: #e8ecf6; font-size: 22px; line-height: 1; cursor: pointer; margin-right: 8px; }
body.ar .back-app { display: none; }