.aria-esfera {
  --brazo: rgba(52, 211, 153, 0.95);
  --brazo2: rgba(16, 185, 129, 0.72);
  --miel: rgba(232, 194, 122, 0.88);
  --nucleo: #f4ffe8;
  --atmosfera: rgba(16, 185, 129, 0.58);
  position: relative;
  display: block;
  width: 74px;
  height: 74px;
  flex: none;
}

.aria-esfera-cuerpo,
.aria-manto {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.aria-manto {
  inset: -24%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 20%, #fff 55%, transparent 62%),
    radial-gradient(1px 1px at 28% 72%, var(--miel) 55%, transparent 62%),
    radial-gradient(1.6px 1.6px at 46% 14%, #fff 55%, transparent 62%),
    radial-gradient(1px 1px at 63% 36%, rgba(255, 255, 255, 0.85) 55%, transparent 62%),
    radial-gradient(1.3px 1.3px at 78% 68%, var(--miel) 55%, transparent 62%),
    radial-gradient(1px 1px at 18% 48%, #fff 55%, transparent 62%),
    radial-gradient(1.5px 1.5px at 86% 24%, #fff 55%, transparent 62%),
    radial-gradient(1px 1px at 54% 84%, var(--miel) 55%, transparent 62%),
    radial-gradient(1.2px 1.2px at 70% 12%, #fff 55%, transparent 62%),
    radial-gradient(1px 1px at 8% 84%, rgba(255, 255, 255, 0.8) 55%, transparent 62%);
  animation: ariaEsferaGira 28s linear infinite, ariaTitila 3.6s ease-in-out infinite;
}

.aria-esfera-cuerpo {
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, #10160f 0%, #07060c 58%, #000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 -14px 18px rgba(0, 0, 0, 0.62),
    0 0 16px var(--atmosfera),
    0 0 34px color-mix(in srgb, var(--atmosfera) 55%, transparent);
  perspective: 90px;
  animation: ariaEsferaHalo 2.8s ease-in-out infinite;
}

.aria-esfera .polvo,
.aria-esfera .galaxia,
.aria-esfera .estrellas,
.aria-esfera .nucleo,
.aria-esfera .brillo,
.aria-esfera .orbita-esfera,
.aria-esfera .inclina,
.aria-esfera .disco {
  position: absolute;
  pointer-events: none;
}

.aria-esfera .polvo {
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 40%, var(--brazo), transparent 46%),
    radial-gradient(circle at 70% 60%, var(--miel), transparent 42%),
    radial-gradient(circle at 48% 52%, var(--brazo2), transparent 55%);
  filter: blur(2.5px);
  opacity: 0.8;
  animation: ariaEsferaGira 16s linear infinite reverse;
}

.aria-esfera .inclina {
  inset: 0;
  transform: rotateX(66deg) rotateZ(-18deg);
  transform-style: preserve-3d;
}

.aria-esfera .galaxia {
  left: 6%;
  top: 30%;
  width: 88%;
  height: 40%;
  border-radius: 50%;
  background: conic-gradient(from 18deg,
    transparent 0 6%,
    var(--brazo) 12%,
    transparent 20%,
    var(--miel) 28%,
    transparent 38%,
    var(--brazo2) 48%,
    transparent 58%,
    var(--miel) 68%,
    transparent 80%,
    var(--brazo) 90%,
    transparent 100%);
  filter: blur(0.4px);
  opacity: 0.9;
  animation: ariaEsferaGira 11s linear infinite;
}

.aria-esfera .disco {
  left: -18%;
  top: 28%;
  width: 136%;
  height: 42%;
  border-radius: 50%;
  background: conic-gradient(from 12deg,
    transparent 0 10%,
    var(--miel) 16%,
    transparent 26%,
    var(--brazo) 40%,
    transparent 54%,
    var(--brazo2) 66%,
    transparent 84%);
  opacity: 0.85;
  animation: ariaEsferaGira 8s linear infinite;
}

.aria-esfera .disco.lejos {
  top: 36%;
  height: 24%;
  opacity: 0.5;
  animation-duration: 15s;
  animation-direction: reverse;
}

.aria-esfera .estrellas {
  inset: -20%;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 28%, #fff 55%, transparent 62%),
    radial-gradient(1px 1px at 34% 66%, var(--miel) 55%, transparent 62%),
    radial-gradient(1.4px 1.4px at 52% 18%, #fff 55%, transparent 62%),
    radial-gradient(1px 1px at 74% 42%, #fff 55%, transparent 62%),
    radial-gradient(1.2px 1.2px at 82% 74%, var(--miel) 55%, transparent 62%),
    radial-gradient(1px 1px at 22% 80%, #fff 55%, transparent 62%);
  animation: ariaEsferaGira 24s linear infinite reverse, ariaTitila 2.8s ease-in-out infinite;
}

.aria-esfera .orbita-esfera {
  inset: 12%;
  animation: ariaEsferaGira 5.5s linear infinite;
}

.aria-esfera .orbita-esfera i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 1px var(--miel);
}

.aria-esfera .nucleo {
  left: 50%;
  top: 50%;
  width: 28%;
  height: 28%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--nucleo) 36%, transparent 72%);
  box-shadow: 0 0 12px 3px var(--nucleo);
}

.aria-esfera .brillo {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.78), transparent 16%),
    radial-gradient(circle at 72% 76%, rgba(232, 194, 122, 0.28), transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}

body:has(.aria-flotante) .escenario {
  padding-bottom: 160px;
}

.aria-conjunto[hidden] {
  display: none !important;
}

.aria-conjunto {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(56px, calc(env(safe-area-inset-bottom) + 48px));
  z-index: 6000;
  width: 84px;
  height: 84px;
  touch-action: none;
}

.aria-flotante {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 84px;
  height: 84px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  box-shadow: none;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.aria-flotante .aria-esfera {
  width: 84px;
  height: 84px;
}

.aria-flotante-cuenta {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 2;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e10600;
  color: #fff;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.aria-flotante.tiene-aviso .aria-esfera {
  --brazo: rgba(255, 90, 74, 0.96);
  --brazo2: rgba(225, 6, 0, 0.8);
  --miel: rgba(255, 176, 140, 0.9);
  --nucleo: #ffe8e4;
  --atmosfera: rgba(225, 6, 0, 0.72);
}

.aria-flotante.tiene-aviso {
  animation: ariaAviso 1.05s ease-in-out infinite;
}

.aria-flotante.tiene-aviso .aria-flotante-cuenta {
  animation: ariaTitila 0.9s ease-in-out infinite;
}

.aria-flotante.arrastra,
.aria-flotante.arrastra.tiene-aviso {
  animation: none;
  cursor: grabbing;
}

@keyframes ariaEsferaGira {
  to { transform: rotate(360deg); }
}

@keyframes ariaEsferaHalo {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.34),
      inset 0 -14px 18px rgba(0, 0, 0, 0.62),
      0 0 12px var(--atmosfera);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.66),
      inset 0 -14px 18px rgba(0, 0, 0, 0.48),
      0 0 26px var(--atmosfera),
      0 0 46px var(--atmosfera);
  }
}

@keyframes ariaTitila {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes ariaAviso {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-7px) rotate(-7deg); }
  60% { transform: translateY(1px) rotate(5deg); }
}

.aria-ventana {
  display: none;
}

.aria-ventana [hidden] {
  display: none !important;
}

.aria-conjunto.abierta {
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 16px));
  height: min(520px, calc(100dvh - 96px));
  overflow: visible;
}

.aria-conjunto.abierta .aria-ventana {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(8, 8, 10, 0.96);
  color: #f6f1e8;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}

.aria-ventana-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 84px;
  cursor: grab;
}

.aria-conjunto.abierta .aria-flotante {
  position: absolute;
  z-index: 2;
  width: 84px;
  height: 84px;
}

.aria-conjunto.abierta.ancla-der .aria-flotante {
  right: 0;
  left: auto;
}

.aria-conjunto.abierta.ancla-izq .aria-flotante {
  left: 0;
  right: auto;
}

.aria-conjunto.abierta.ancla-abajo .aria-flotante {
  bottom: 0;
  top: auto;
}

.aria-conjunto.abierta.ancla-arriba .aria-flotante {
  top: 0;
  bottom: auto;
}

.aria-conjunto.abierta.ancla-arriba.ancla-der .aria-ventana-barra {
  padding-right: 92px;
}

.aria-conjunto.abierta.ancla-arriba.ancla-izq .aria-ventana-barra {
  padding-left: 92px;
}

.aria-conjunto.abierta.ancla-abajo .aria-ventana {
  padding-bottom: 112px;
}

.aria-ventana-titulo {
  flex: 1;
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.aria-ventana .aria-ventana-cerrar,
.aria-ventana .aria-ventana-enviar,
.aria-ventana .aria-ventana-paso {
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(246, 241, 232, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #f6f1e8;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.aria-ventana .aria-ventana-enviar,
.aria-ventana .aria-ventana-paso {
  background: #f6f1e8;
  color: #140704;
  border-color: #f6f1e8;
}

.aria-ventana-hilo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  margin: 8px 0;
  overflow: auto;
}

.aria-ventana-vacio,
.aria-ventana-nota,
.aria-ventana-linea {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

.aria-ventana-vacio,
.aria-ventana-nota {
  color: rgba(246, 241, 232, 0.72);
}

.aria-ventana-linea {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 16px;
  background: #10281c;
  color: #f6f1e8;
}

.aria-ventana-linea b {
  display: block;
  margin-bottom: 2px;
  color: #3dd68c;
  font-size: 12px;
}

.aria-ventana-linea.tuyo {
  align-self: flex-end;
  background: #241416;
}

.aria-ventana-linea.tuyo b {
  color: #ffb4ae;
}

.aria-ventana-linea a {
  color: #f6f1e8;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.aria-tipeo::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: #3dd68c;
  animation: ariaCaret 0.32s steps(1) infinite;
}

.aria-matriz {
  color: #d9ffe8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 8px #3dd68c;
}

@keyframes ariaCaret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aria-tipeo::after { animation: none; }
}

.aria-ventana-forma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.aria-ventana-forma input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(61, 214, 140, 0.55);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45);
  color: #f6f1e8;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 16px;
}

.aria-ventana-entrada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 241, 232, 0.18);
}

.aria-ventana-entrada p {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.35;
}

.aria-ventana .aria-ventana-paso {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .aria-esfera-cuerpo,
  .aria-manto,
  .aria-esfera .polvo,
  .aria-esfera .galaxia,
  .aria-esfera .disco,
  .aria-esfera .estrellas,
  .aria-esfera .orbita-esfera,
  .aria-flotante.tiene-aviso,
  .aria-flotante.tiene-aviso .aria-flotante-cuenta {
    animation: none;
  }
}