/* ═══════════════════════════════════════════════════════════════════════════
   VIDRIO — la receta completa

   La app en Android no puede desenfocar el fondo (`expo-blur` cae a `none` sin
   `blurTarget`) y allí el cristal se dibuja por capas. La web sí tiene
   `backdrop-filter` nativo, así que este archivo es la versión de referencia:
   cuerpo translúcido, desenfoque CON saturación, canto que recoge luz y un
   reflejo corto.
   ═══════════════════════════════════════════════════════════════════════════ */

.glass {
  position: relative;
  isolation: isolate;              /* los ::before/::after no se escapan */
  background: var(--glass-body);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  /* La saturación es la mitad del truco. Un `blur` a secas desatura lo que hay
     detrás y el resultado se ve gris y plástico; subirla al 170% devuelve el
     color que el desenfoque se comió y el cristal parece cristal. */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* El canto. Un borde plano de 1px se lee como una caja dibujada; el cristal de
   verdad recoge más luz arriba que abajo. Se hace con un degradado enmascarado
   al perímetro en vez de con `border-color`, que no admite degradados. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
              var(--glass-sheen) 0%,
              var(--ice-08) 34%,
              var(--ice-0) 62%,
              rgba(0, 214, 194, .22) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* El reflejo. CORTO — una banda en el tercio superior, nunca un lavado de toda
   la superficie: eso último no parece vidrio, parece niebla. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 38%;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--ice-08), var(--ice-0));
  pointer-events: none;
}

.glass--deep { background: var(--glass-body-2); --glass-blur: 26px; }
.glass--pill { border-radius: var(--r-pill); }

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pill);
  background: var(--aurora);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  /* Solo transform y opacity. Animar `box-shadow` o `background` en un hover
     obliga a repintar el botón entero en cada fotograma. */
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
  will-change: transform;
}

/* El resplandor es una capa aparte para poder subirle la opacidad sin tocar
   la sombra del botón, que sí costaría repintado. */
.btn::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  border-radius: inherit;
  background: var(--aurora);
  filter: blur(26px);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}

.btn { position: relative; isolation: isolate; }
.btn:hover           { transform: translate3d(0, -2px, 0); }
.btn:hover::before   { opacity: .5; }
.btn:active          { transform: translate3d(0, 0, 0) scale(.98); }

.btn--ghost {
  background: var(--ice-04);
  color: var(--ice);
  border: 1px solid var(--ice-14);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
}
.btn--ghost::before { display: none; }
.btn--ghost:hover   { background: var(--ice-08); border-color: var(--ice-28); }

.btn--sm { padding: .62rem 1.15rem; font-size: .85rem; }

/* ── Fichas ─────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--ice-14);
  background: var(--ice-04);
  font-size: .8rem;
  font-weight: 400;
  color: var(--ice-80);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
}

.chip--on {
  border-color: rgba(0, 214, 194, .5);
  background: rgba(0, 214, 194, .12);
  color: var(--teal);
}

.chip__dot {
  inline-size: .42rem;
  block-size: .42rem;
  border-radius: 50%;
  background: var(--aurora-flat);
}