/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Medallones decorativos: el botón conserva sus medidas y su nombre accesible. */
.signo-nav:has(.nav-cosmos) {column-gap:24px;row-gap:32px}
.signo-nav .btn-compact.nav-cosmos {
  --nav-orb-size:30.6px;
  overflow:visible;
  width:var(--nav-button-width,auto);
  height:42px;
  min-height:42px;
  padding:17px 12px 7px;
  line-height:1.3;
}
.nav-cosmos-label {display:block;white-space:nowrap;pointer-events:none}
.nav-orb {
  --orb-color:#8364b8;
  position:absolute;
  top:-1px;
  left:50%;
  transform:translate(-50%,-50%);
  width:var(--nav-orb-size);
  height:var(--nav-orb-size);
  box-sizing:border-box;
  display:grid;
  place-items:center;
  isolation:isolate;
  z-index:3;
  border:1px solid #ffdfa1;
  border-radius:50%;
  color:#ffe4a5;
  background:radial-gradient(circle at 30% 20%,var(--orb-color),#171329 75%);
  box-shadow:0 0 4px #ffe6acb3,0 0 11px #e9ad494d,2px 3px 8px #08091d66;
  pointer-events:auto;
}
.nav-orb::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background-image:url('images/botones-planeta-texturas-v1.png');
  background-size:384% 256%;
  background-position:6.16% 10.58%;
  mix-blend-mode:luminosity;
  opacity:.72;
}
.nav-orb::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 25% 15%,#fff8dc40,transparent 50%,#08091d70 100%);
  box-shadow:inset 0 0 3px #ffe8b680;
  pointer-events:none;
}
.nav-orb-symbol {
  position:relative;
  z-index:1;
  display:block;
  width:23.4px;
  height:23.4px;
  text-align:center;
  font:400 19.8px/23.4px 'Noto Sans Symbols 2','Segoe UI Symbol',serif;
  letter-spacing:0;
  text-shadow:0 1px 3px #080619,0 0 3px #080619;
  pointer-events:none;
}
.nav-orb-symbol svg {
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px #080619);
}
.nav-orb-symbol:not(:has(svg)) {font-size:18px;transform:translateY(1.8px)}
.nav-orb--house .nav-orb-symbol {
  font:600 19px/23.4px 'Cormorant Garamond',Georgia,serif;
  transform:none;
}
.nav-orb-orbit {
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  z-index:4;
  animation:nav-orb-orbit 4.2s linear infinite;
  pointer-events:none;
}
.nav-orb-orbit::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:conic-gradient(transparent 0deg 285deg,#ffda6e60 315deg,#fff4b9 355deg,#fff 359deg,transparent 360deg);
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.3px));
}
.nav-orb-orbit::after {
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fffbe5;
  transform:translate(-50%,-50%);
  box-shadow:0 0 3px #fff,0 0 6px #ffe392,0 0 10px #f3bb53;
}
.signo-nav-home .nav-orb-orbit {animation-delay:-1.4s}
.signo-nav-next .nav-orb-orbit {animation-delay:-2.8s}
@keyframes nav-orb-orbit {to {transform:rotate(360deg)}}
.nav-orb--fire {--orb-color:#ad283d}
.nav-orb--earth {--orb-color:#267b4c}
.nav-orb--air {--orb-color:#ada02e}
.nav-orb--water {--orb-color:#246da1}
.nav-orb--sun {--orb-color:#c38325}
.nav-orb--moon {--orb-color:#818ca7}
.nav-orb--mercury {--orb-color:#8b7d75}
.nav-orb--venus {--orb-color:#a67b42}
.nav-orb--mars {--orb-color:#a6332e}
.nav-orb--jupiter {--orb-color:#a26844}
.nav-orb--saturn {--orb-color:#b19a5b}
.nav-orb--uranus {--orb-color:#3a929c}
.nav-orb--neptune {--orb-color:#3454bd}
.nav-orb--pluto {--orb-color:#824a88}
.nav-orb--universe {
  background:#171329 url('images/navegacion-universo.svg') center/cover no-repeat;
}
.nav-orb--universe::before {display:none}
.nav-orb--solar-system {--orb-color:#334e83}
.nav-orb--elements {--orb-color:#366c67}
:root[data-theme="sol"] .nav-orb {
  border-color:#c49345;
  box-shadow:0 0 0 1px #d9af6866,0 3px 9px #5a381b40;
}
@media(forced-colors:active) {
  .nav-orb {border:1px solid LinkText;background:Canvas;color:LinkText;box-shadow:none}
  .nav-orb::before,.nav-orb::after,.nav-orb-orbit {display:none}
  .nav-orb-symbol,.nav-orb-symbol svg {text-shadow:none;filter:none}
}
@media(prefers-reduced-motion:reduce) {.nav-orb-orbit {animation:none}}
@media print {.nav-orb {display:none}}