/* Piel del Observatorio Ofiuco para el sistema solar 3D (código de la app TransitosCelestes, carpeta assets/solar).
   Misma identidad que el resto del sitio: negro profundo, dorado y violeta; Cormorant, Inter y Space Mono. */
@font-face { font-family: "Cormorant"; font-weight: 300; font-display: swap; src: url(../../vendor/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 300; font-style: italic; font-display: swap; src: url(../../vendor/fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 400; font-display: swap; src: url(../../vendor/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../../vendor/fonts/inter-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-display: swap; src: url(../../vendor/fonts/space-mono-latin-400-normal.woff2) format("woff2"); }
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Cormorant", Georgia, serif; --mono: "Space Mono", ui-monospace, monospace;
  --gold: #d8b77a; --gold-2: #f0d9a8; --violet: #9384ff; --line: rgba(232, 226, 214, .16); --muted: #9d9bb0; --star: #f1ece2;
}
html, body { background: #04050b; color: var(--star); -webkit-font-smoothing: antialiased; }
.glass, .date, .tools button, .time, .chips button, .info, .insp-bar { background: rgba(4, 5, 11, .66); border-color: var(--line); }

/* acceso al sitio */
.site-home {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; margin-right: 10px;
  background: rgba(4, 5, 11, .72); border: 1px solid var(--line); color: var(--star); text-decoration: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 400 10px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; transition: border-color .3s, color .3s;
}
.site-home:hover { border-color: var(--gold); color: var(--gold-2); }
.site-home img { width: 30px; height: 30px; object-fit: contain; }
.site-home .arr { font: 14px var(--font); letter-spacing: 0; }
.hud.top .left { display: flex; align-items: center; }
.page-title { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 9; text-align: center; pointer-events: none; }
.page-title h1 { margin: 0; font: 300 34px/1 var(--serif); letter-spacing: 0; text-shadow: 0 0 18px #000; }
.page-title h1 em { font-style: italic; color: var(--gold-2); }
.page-title p { margin: 6px 0 0; font: 400 9.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
body.inspect .page-title, body.ar .page-title { display: none; }

/* fecha, herramientas y tiempo */
.date { border-radius: 12px; }
.date b { font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: 0; }
.date small, .speeds button, .tools button, .time > button { font-family: var(--mono); letter-spacing: .06em; }
.tools button { border-radius: 50%; color: var(--muted); }
.tools button.on { color: var(--gold-2); border-color: rgba(216, 183, 122, .55); }
.tools button.ar { background: linear-gradient(135deg, var(--gold), #b98f4e); color: #1a1206; }
.time { border-radius: 999px; padding: 6px 8px; }
.time > button { border-radius: 999px; }
.speeds button { border-radius: 999px; font-size: 11px; }
.speeds button.on { color: #1a1206; background: var(--gold-2); border-color: var(--gold-2); }

/* selector de planetas: esferas 3D girando con su textura real */
.chips { gap: 8px; padding: 2px 2px 4px; }
.chips button { border-radius: 999px; padding: 5px 14px 5px 5px; gap: 9px; font: 400 13px var(--font); transition: border-color .3s, box-shadow .3s, transform .3s; }
.chips button:hover { border-color: rgba(216, 183, 122, .5); transform: translateY(-1px); }
.chips button.on { border-color: var(--gold); box-shadow: 0 0 16px rgba(216, 183, 122, .35); color: var(--gold-2); }
.chips button canvas.picon { flex: none; }

/* etiquetas sobre la escena */
.lbl { font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 236, 226, .85); }

/* ficha del astro */
.info { border-radius: 16px; }
.info-head h2 { font: 300 30px/1.05 var(--serif); letter-spacing: 0; }
.info-head small { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.stats div { border-color: var(--line); border-radius: 8px; }
.stats small { font-family: var(--mono); letter-spacing: .12em; }
.stats b { font-size: 13px; }
.fact { border-left-color: var(--violet); background: rgba(147, 132, 255, .08); }
.obs { border-left-color: var(--gold); background: rgba(216, 183, 122, .08); }

/* modo inspección */
.insp-bar { border-radius: 999px; padding: 6px 8px; }
.insp-bar b { font: 300 26px/1 var(--serif); letter-spacing: 0; }
.insp-bar button { border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.insp-bar #inspBack, .insp-tools button.on { color: var(--gold-2); border-color: rgba(216, 183, 122, .5); }

/* carga */
.loading { background: #04050b; }
.loading p { font: 400 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.loading .bar i { background: linear-gradient(90deg, var(--gold), var(--violet)); }

/* escritorio: la ficha no ocupa todo el ancho */
@media (min-width: 900px) {
  .info { left: 50%; right: auto; width: min(760px, calc(100% - 24px)); transform: translate(-50%, 110%); bottom: 12px; max-height: 44vh; }
  .info.open { transform: translate(-50%, 0); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .hud.bottom { display: flex; flex-direction: column; align-items: center; }
  .time { align-self: center; }
  .chips { max-width: 100%; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .site-home .txt { display: none; } .site-home { padding: 6px; }
  .page-title { display: none; }
  .date { padding: 5px 9px; }
  .date b { font-size: 14px; white-space: nowrap; }
  .date small { font-size: 9.5px; white-space: nowrap; }
  .site-home { margin-right: 6px; }
  .tools { gap: 4px; }
  .tools button { width: 31px; height: 31px; font-size: 11px; }
  .site-home img { width: 24px; height: 24px; }
  .site-home .arr { display: none; }
  .hud { padding-left: 8px; padding-right: 8px; }
}