/* ==========================================================================
   Superficies — cristal (glassmorphism) y relieve (neumorphism)
   Regla de la casa: el cristal flota, el relieve se toca.
   Cristal → contenedores, cabeceras, hojas, tarjetas informativas.
   Relieve → controles pulsables, fichas de juego, avatares.
   ========================================================================== */

/* ---- Cristal ------------------------------------------------------------ */

.cristal {
  position: relative;
  background: var(--cristal-fondo);
  border: 1px solid var(--cristal-borde);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--cristal-blur)) saturate(var(--cristal-satura));
  -webkit-backdrop-filter: blur(var(--cristal-blur)) saturate(var(--cristal-satura));
  box-shadow: var(--sombra-2);
  isolation: isolate;
}

/* Reflejo superior: la ceja de luz que hace creíble el vidrio */
.cristal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    var(--cristal-brillo) 0%,
    transparent 32%,
    transparent 68%,
    rgb(var(--verde-300-rgb) / 0.14) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.cristal--alto {
  background: var(--cristal-fondo-alto);
  border-color: var(--cristal-borde-alto);
  box-shadow: var(--sombra-3);
}

.cristal--sutil {
  backdrop-filter: blur(var(--cristal-blur-sutil)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--cristal-blur-sutil)) saturate(120%);
  box-shadow: var(--sombra-1);
}

.cristal--plano { box-shadow: none; }

/* ---- Relieve ------------------------------------------------------------ */

.relieve {
  background: var(--neu-fondo);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-neu);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.07);
}

.relieve--sutil { box-shadow: var(--sombra-neu-sutil); }

.relieve--hundido {
  background: var(--neu-fondo-hundido);
  box-shadow: var(--sombra-neu-hundida);
  border-color: transparent;
}

/* Al pulsar, el relieve se hunde: feedback físico sin ruido visual */
.relieve--pulsable {
  transition:
    box-shadow var(--d-rapida) var(--ease-suave),
    transform var(--d-rapida) var(--ease-suave),
    background var(--d-rapida) var(--ease-suave);
}

.relieve--pulsable:active {
  box-shadow: var(--sombra-neu-hundida);
  transform: scale(0.975);
}

@media (hover: hover) and (pointer: fine) {
  .relieve--pulsable:hover {
    box-shadow:
      calc(var(--neu-dist) * -1) calc(var(--neu-dist) * -1) calc(var(--neu-difuso) * 1.15) var(--neu-luz),
      var(--neu-dist) var(--neu-dist) calc(var(--neu-difuso) * 1.15) var(--neu-sombra);
  }
}

/* ---- Mezclas ------------------------------------------------------------ */

/* Cristal con un borde acentuado: para lo que está "vivo" ahora mismo */
.destacado {
  border-color: var(--acento-borde);
  box-shadow: var(--sombra-3), var(--resplandor);
}

/* Halo respirando detrás de un elemento (reto diario, logro nuevo) */
.halo { position: relative; }
.halo::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgb(var(--verde-300-rgb) / 0.22), transparent 68%);
  filter: blur(18px);
  z-index: -1;
  animation: latir 4.5s var(--ease-respiro) infinite;
  pointer-events: none;
}

/* ==========================================================================
   Repliegue elegante: si el navegador no soporta backdrop-filter,
   el cristal pasa a ser un sólido translúcido creíble.
   ========================================================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cristal { background: rgb(var(--verde-800-rgb) / 0.86); }
  .cristal--alto { background: rgb(var(--verde-800-rgb) / 0.94); }
  [data-tema="claro"] .cristal { background: rgb(255 255 255 / 0.90); }
  [data-tema="claro"] .cristal--alto { background: rgb(255 255 255 / 0.96); }
}

/* En equipos modestos el blur constante cuesta caro: lo bajamos */
@media (max-width: 360px) {
  :root { --cristal-blur: 16px; }
}