/* Tokens — vidrio azul cielo transparente sobre fondo oscuro */
:root{
  --cielo:#7EC8E3;
  --cielo-suave:#BEE3F5;
  --blanco:#FFFFFF;
  --vidrio:rgba(190,227,245,0.14);
  --vidrio-borde:rgba(255,255,255,0.35);
  --foco:#FFFFFF;
  --radio:18px;
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
}

.entrada{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  text-align:center;
}

.entrada__boton{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem 1.6rem;
  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  color:var(--blanco);
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  cursor:pointer;
  min-height:48px;
  transition:background .25s ease, transform .25s ease;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
}
.entrada__boton:hover{
  background:rgba(190,227,245,0.24);
  transform:translateY(-2px);
}
.entrada__boton:focus-visible{
  outline:3px solid var(--foco);
  outline-offset:4px;
}

.entrada__anillo{
  position:absolute;
  inset:-10px;
  border-radius:calc(var(--radio) + 10px);
  border:1.5px solid var(--cielo-suave);
  opacity:.5;
  animation:respirar 2.6s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{ transform:scale(1); opacity:.4; }
  50%{ transform:scale(1.06); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .entrada__anillo{ animation:none; display:none; }
}

.entrada__icono{ font-size:1rem; color:var(--cielo-suave); }

.entrada__estado{
  min-height:1.3em;
  font-size:1rem;
  color:var(--blanco);
  opacity:.9;
}