/* ==========================================================================
   components.css — Blobs, Timer, Player, Botones, Overlays
   ========================================================================== */

/* ==========================================================================
   BLOBS
   ========================================================================== */

.blob {
  position: absolute;
  border-radius: var(--blob-shape-a);
  background: radial-gradient(
    ellipse at 42% 40%,
    var(--blob-color-1, var(--emotion-conganas-2)) 0%,
    var(--blob-color-2, var(--emotion-conganas-1)) 54%,
    transparent 100%
  );
  will-change: transform, border-radius;
  pointer-events: none;
  isolation: isolate;
  box-shadow: var(--shadow-blob);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.blob::before,
.blob::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Contorno fino que da nitidez y referencia a las nuevas imágenes */
.blob::before {
  inset: 10%;
  border: var(--blob-outline-width) solid var(--blob-outline-color);
  opacity: 0.72;
  transform: rotate(-8deg);
}

/* Onda expansiva súper sutil encima de la mancha */
.blob::after {
  inset: 50% auto auto 50%;
  width: 64%;
  height: 64%;
  border: var(--blob-outline-width) solid var(--blob-outline-strong);
  opacity: var(--blob-wave-opacity);
  transform: translate(-50%, -50%);
  animation: blob-wave calc(var(--duration-blob) * 0.9) var(--ease-soft) infinite;
}

/* Blob de fondo (decorativo) */
.blob--bg {
  opacity: var(--blob-opacity-bg);
  filter: var(--blob-filter-lg);
  animation: blob-float-bg 4000ms var(--ease-organic) infinite alternate;
  pointer-events: none;
  z-index: var(--z-blob);
  mix-blend-mode: lighten;
}

/* Blob de emoción (interactivo en home/selección) */
.blob--emotion {
  animation: blob-float var(--duration-blob) var(--ease-organic) infinite;
  opacity: var(--blob-opacity-rest);
  filter: var(--blob-filter-sm);
  cursor: pointer;
  pointer-events: all;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 18%, transparent 34%),
    radial-gradient(
      ellipse at 42% 40%,
      var(--blob-color-1, var(--emotion-conganas-2)) 0%,
      var(--blob-color-2, var(--emotion-conganas-1)) 54%,
      transparent 100%
    );
  transition:
    opacity    var(--transition-base),
    transform  var(--transition-base),
    filter     var(--transition-base),
    box-shadow var(--transition-base);
}

.blob--emotion::before {
  inset: 8%;
  border: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(255,255,255,0.24) 18.5% 21%, transparent 21.5% 33%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(255,255,255,0.18) 34.5% 36.5%, transparent 37% 49%),
    radial-gradient(circle at 50% 50%, transparent 0 50%, rgba(255,255,255,0.16) 50.5% 52.5%, transparent 53%);
  opacity: 0.72;
  transform: rotate(-4deg) scale(1.02);
}

.blob--emotion::after {
  inset: 14%;
  width: auto;
  height: auto;
  border: 1px solid rgba(255,255,255,0.28);
  opacity: 0.56;
  transform: none;
  animation: none;
}

.blob--emotion:hover,
.blob--emotion:focus-visible {
  opacity: var(--blob-opacity-hover);
  filter: none;
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
  outline: none;
}

.blob--emotion.blob--selected {
  opacity: var(--blob-opacity-selected);
  filter: none;
  transform: scale(1.10);
  box-shadow: var(--shadow-lg);
  animation-play-state: paused;
}

.blob--emotion.blob--selected::before {
  opacity: 0.92;
}

.blob--emotion.blob--selected::after {
  border-color: rgba(255,255,255,0.44);
}

.blob--interactive {
  pointer-events: all;
}

/* Mezcla de emociones */
.blob--mix {
  position: absolute;
  animation: blob-float var(--duration-blob) var(--ease-organic) infinite;
  opacity: 0.68;
  filter: var(--blob-filter-sm);
  mix-blend-mode: lighten;
}

@media (hover: none) and (pointer: coarse) {
  /* KEEP will-change: transform en móvil — es más importante que en desktop.
     Sin él el browser no puede pre-asignar la capa GPU → promueve/degrada dinámicamente → flash. */
  .blob {
    will-change: transform;
    transform: translateZ(0);
  }

  .blob--bg,
  .blob--mix {
    mix-blend-mode: normal;
  }

  /* Eliminar el pseudo-elemento ::after en emotion blobs en móvil */
  .blob--emotion::after {
    display: none;
  }

  /* Labels sin backdrop-filter en móvil — causa un flush de composición por frame.
     Fondo sólido + opacidad como fallback visual equivalente. */
  .blob--label-top .blob__label {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(255, 255, 255, 0.80);
    text-shadow: none;
  }
}

/* Tamaños */
.blob--xl { width: var(--blob-size-xl); height: var(--blob-size-xl); }
.blob--lg { width: var(--blob-size-lg); height: var(--blob-size-lg); }
.blob--md { width: var(--blob-size-md); height: var(--blob-size-md); }
.blob--sm { width: var(--blob-size-sm); height: var(--blob-size-sm); }
.blob--xs { width: var(--blob-size-xs); height: var(--blob-size-xs); }

/* Label del blob */
.blob__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-base);
  pointer-events: none;
  user-select: none;
  text-align: center;
  padding: var(--space-4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.blob--label-top .blob__label {
  inset: auto auto 100% 50%;
  transform: translate(-50%, -16px);
  width: max-content;
  max-width: 120px;
  min-width: 72px;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: var(--glass-bg-medium);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: var(--glass-border-strong);
  box-shadow: var(--shadow-sm);
}

/* Expansión al seleccionar */
.blob--expanding {
  animation: blob-expand var(--duration-expand) var(--ease-in-out) forwards;
  z-index: var(--z-overlay);
}

/* Campo de blobs en home */
.blob-field {
  position: relative;
  width: 100%;
  flex: 1;
}

.blob-field--mixed {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   TIMER CIRCULAR
   ========================================================================== */

.timer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--timer-size);
  height: var(--timer-size);
}

.timer__svg {
  position: absolute;
  inset: 0;
}

.timer__track {
  /* El arco de fondo ya está definido en el SVG inline */
}

.timer__progress {
  transition: stroke-dashoffset 1s linear;
}

.timer__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.timer__time {
  font-family: var(--font-display);
  font-size: var(--timer-text-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* ==========================================================================
   REPRODUCTOR DE AUDIO
   ========================================================================== */

.player {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--player-padding);
  background: var(--player-bg);
  -webkit-backdrop-filter: var(--player-backdrop-blur);
  backdrop-filter: var(--player-backdrop-blur);
  border-radius: var(--player-radius);
  width: 100%;
  border: var(--surface-stroke);
  box-shadow: var(--surface-shadow);
}

.player--info {
  gap: var(--space-3);
  min-height: 96px;
  justify-content: center;
}

/* Pulso visual */
.player__pulse {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: var(--player-pulse-size);
  height: var(--player-pulse-size);
  pointer-events: none;
  z-index: 0;
}

.player__pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid currentColor;
  opacity: 0;
  transform: scale(1);
}

.player__pulse-ring--active.player__pulse-ring--1 {
  animation: pulse-ring var(--player-pulse-duration) var(--ease-out) infinite;
}

.player__pulse-ring--active.player__pulse-ring--2 {
  animation: pulse-ring var(--player-pulse-duration) var(--ease-out) infinite;
  animation-delay: calc(var(--player-pulse-duration) / 2);
}

/* Label */
.player__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Barra de progreso */
.player__bar-wrapper {
  width: 100%;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.player__bar {
  height: var(--player-bar-height);
  background: var(--player-bar-bg);
  border-radius: var(--player-bar-radius);
  overflow: hidden;
}

.player__bar-fill {
  height: 100%;
  width: 0%;
  background: var(--player-bar-fill);
  border-radius: var(--player-bar-radius);
  transition: width 0.5s linear;
}

.player__times {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.player__time {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

/* Controles */
.player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

.player__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--player-btn-radius);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.player__btn--play {
  width: var(--player-btn-size);
  height: var(--player-btn-size);
  background: var(--player-btn-bg);
  color: var(--player-btn-color);
}

.player__btn--play:active {
  transform: scale(0.92);
}

.player__status {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  text-align: center;
  min-height: 1rem;
}

/* Visualizador de ondas */
.player__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 28px;
  position: relative;
  z-index: 1;
}

.player__wave-bar {
  width: 3px;
  background: var(--color-text-soft);
  border-radius: 99px;
  height: 5px;
}

.player--playing .player__wave-bar:nth-child(1) { animation: wave-bar 0.85s ease-in-out -0.72s infinite alternate; }
.player--playing .player__wave-bar:nth-child(2) { animation: wave-bar 0.85s ease-in-out -0.56s infinite alternate; }
.player--playing .player__wave-bar:nth-child(3) { animation: wave-bar 0.85s ease-in-out -0.38s infinite alternate; }
.player--playing .player__wave-bar:nth-child(4) { animation: wave-bar 0.85s ease-in-out -0.20s infinite alternate; }
.player--playing .player__wave-bar:nth-child(5) { animation: wave-bar 0.85s ease-in-out -0.08s infinite alternate; }
.player--playing .player__wave-bar:nth-child(6) { animation: wave-bar 0.85s ease-in-out -0.48s infinite alternate; }
.player--playing .player__wave-bar:nth-child(7) { animation: wave-bar 0.85s ease-in-out -0.32s infinite alternate; }
.player--playing .player__wave-bar:nth-child(8) { animation: wave-bar 0.85s ease-in-out -0.14s infinite alternate; }

@keyframes wave-bar {
  0%   { height: 3px; }
  100% { height: 22px; }
}

/* Player compacto */
.player--compact {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.player--compact .player__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.player--compact .player__btn--play {
  width: 48px;
  height: 48px;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity    var(--transition-fast),
    transform  var(--transition-fast),
    background var(--transition-base);
}

.btn:active {
  transform: scale(0.96);
}

.btn__content {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.btn__icon {
  width: var(--space-4);
  height: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn__icon svg {
  width: 100%;
  height: 100%;
}

.btn__text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-1) / 2);
}

.btn__label {
  line-height: 1;
}

.btn__hint {
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: inherit;
  opacity: 0.62;
}

/* Primario */
.btn--primary {
  background: var(--btn-primary-bg);
  color:      var(--btn-primary-color);
  border-radius: var(--btn-primary-radius);
  padding:    var(--btn-primary-padding);
  font-family: var(--font-ui);
  font-size:  var(--btn-primary-font-size);
  font-weight: var(--btn-primary-weight);
  letter-spacing: var(--tracking-base);
  min-height: 52px;
  width: 100%;
}

.btn--primary:hover {
  opacity: 0.88;
  box-shadow: var(--shadow-md);
}

.btn--primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Secundario / ghost */
.btn--secondary {
  background: var(--btn-secondary-bg);
  color:      var(--btn-secondary-color);
  border:     var(--btn-secondary-border);
  border-radius: var(--btn-secondary-radius);
  padding:    var(--btn-primary-padding);
  font-family: var(--font-ui);
  font-size:  var(--text-base);
  font-weight: var(--weight-regular);
  min-height: 48px;
  width: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-xs);
}

.btn--secondary:hover,
.btn--ghost:hover {
  background: var(--glass-bg-medium);
}

/* Ghost sin borde */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-base);
}

.btn--ghost-icon {
  width: auto;
}

.btn--ghost-icon .btn__content {
  width: auto;
}

/* Chip de duración */
.btn--duration {
  padding:     var(--btn-duration-padding);
  border-radius: var(--btn-duration-radius);
  border:      var(--btn-duration-border);
  background:  transparent;
  color:       var(--color-text-primary);
  font-family: var(--font-ui);
  font-size:   var(--text-base);
  font-weight: var(--weight-regular);
  transition:  background var(--transition-base), color var(--transition-base);
  min-width: 90px;
}

.btn--duration.active,
.btn--duration[aria-selected="true"] {
  background: var(--btn-duration-active-bg);
  color:      var(--btn-duration-active-color);
  border-color: var(--btn-duration-active-bg);
}

/* Botón "Esto me ayudó hoy" */
.btn--helped {
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: var(--btn-secondary-radius);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-base);
  width: auto;
}

.btn--helped.btn--saved {
  border-color: currentColor;
  color: var(--color-text-primary);
}

.btn--liked {
  animation: like-pop 520ms var(--ease-out);
  box-shadow: 0 18px 42px rgba(225, 113, 90, 0.22);
}

.btn--option {
  min-height: 56px;
}

.btn--icon-only {
  width: var(--action-size);
  min-width: var(--action-size);
  min-height: var(--action-size);
  padding: 0;
  border-radius: var(--radius-full);
}

.btn--icon-only .btn__content {
  width: auto;
}

/* ==========================================================================
   HEADER MÍNIMO
   ========================================================================== */

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--screen-padding-x);
  z-index: var(--z-controls);
}

.app-header__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.app-header__back:active { opacity: 0.6; }

.app-header__back svg { flex-shrink: 0; }

.ritual-card__button {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  text-align: left;
}

@keyframes like-pop {
  0% { transform: scale(1); }
  38% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.app-header__logo {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-base);
}

.app-header__action {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  cursor: pointer;
  padding: var(--space-2);
  -webkit-tap-highlight-color: transparent;
}

.screen-nav {
  position: absolute;
  inset: var(--space-6) var(--screen-padding-x) auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-controls);
  pointer-events: none;
}

.screen-nav__left,
.screen-nav__right {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.screen-nav__btn,
.screen-nav .app-header__back {
  width: var(--action-size);
  height: var(--action-size);
  border-radius: var(--radius-full);
  background: var(--glass-bg-soft);
  border: var(--glass-border-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   FRASCO DE DONACIONES (SVG)
   ========================================================================== */

.jar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.jar-svg {
  width: var(--jar-width);
  height: var(--jar-height);
  overflow: visible;
  filter: drop-shadow(var(--shadow-sm));
}

.jar-svg--sm {
  width: var(--jar-width-sm);
  height: var(--jar-height-sm);
}

.jar-svg--lg {
  width: var(--jar-width-lg);
  height: var(--jar-height-lg);
}

.jar-fill-container {
  clip-path: inset(0 0 0 0 round 6px);
  transition: height var(--jar-anim-duration) var(--ease-soft);
}

.jar-shell {
  fill: var(--jar-glass-fill);
  stroke: var(--jar-stroke-color);
  stroke-width: var(--jar-stroke);
}

.jar-rim,
.jar-lid {
  stroke-width: var(--jar-stroke);
}

.jar-rim {
  fill: var(--jar-cap-fill);
  stroke: var(--jar-cap-stroke);
}

.jar-lid {
  fill: rgba(255, 255, 255, 0.52);
  stroke: var(--jar-stroke-color);
}

.jar-highlight {
  fill: none;
  stroke: var(--jar-highlight);
  stroke-width: calc(var(--jar-stroke) * 1.15);
  stroke-linecap: round;
}

.jar-inner-glow {
  fill: none;
  stroke: var(--jar-glass-stroke);
  stroke-width: calc(var(--jar-stroke) * 0.95);
  opacity: 0.9;
}

.jar-liquid {
  fill: var(--jar-fill-color);
  opacity: var(--jar-fill-opacity);
}

.jar-liquid-sheen {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: calc(var(--jar-stroke) * 1.8);
  stroke-linecap: round;
}

.jar-base-shadow {
  fill: var(--jar-liquid-shadow);
}

.jar-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
}

/* ==========================================================================
   OVERLAY DE PAUSA
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  padding: var(--screen-padding-x);
  animation: fade-in var(--duration-base) var(--ease-out) forwards;
}

.overlay__card {
  background: var(--color-bg);
  border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-lg) var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.overlay__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-align: center;
  color: var(--color-text-primary);
}

/* ==========================================================================
   TEXTO REVELADO LÍNEA A LÍNEA
   ========================================================================== */

.text-reveal .line {
  display: block;
  opacity: 0;
  animation: text-reveal-line var(--text-reveal-dur) var(--text-reveal-ease) forwards;
}

/* El delay escalonado se setea vía JS con style.animationDelay */

/* ==========================================================================
   TARJETA DE PRÁCTICA / RITUAL
   ========================================================================== */

.ritual-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.66) 100%),
    var(--color-bg-panel);
  border: var(--surface-stroke);
  border-radius: var(--surface-radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: var(--ambient-panel-blur);
  -webkit-backdrop-filter: var(--ambient-panel-blur);
  box-shadow: var(--surface-shadow);
}

.ritual-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ritual-card:focus-within {
  box-shadow: var(--focus-ring-strong), var(--shadow-md);
}

.ritual-card:active {
  transform: translateY(0);
}

.ritual-card__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  font-weight: var(--weight-regular);
}

.ritual-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-base);
}

.ritual-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
}

.ritual-card__tag {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* ==========================================================================
   FRASE BISAGRA (transición entre bloques)
   ========================================================================== */

.bisagra {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--screen-padding-x);
  text-align: center;
}

.bisagra__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  max-width: 280px;
  animation: fade-in-up var(--duration-slow) var(--ease-soft) forwards;
}

/* ==========================================================================
   AMBIENT ORB — orbe de ambiente atmosférico
   Gradiente suave que crea profundidad sin texto ni blob interactivo.
   Inspirado en las referencias "ESTUPENDO" y "perfecto en movimiento":
   núcleo más opaco, halo que se disuelve, anillos de onda muy sutiles.
   Se usa en: home, apertura, proposals, ritual-detail, closing.
   ========================================================================== */

.ambient-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 182, 148, 0.34) 0%, transparent 34%),
    radial-gradient(circle at 66% 32%, rgba(136, 200, 228, 0.36) 0%, transparent 38%),
    radial-gradient(circle at 52% 70%, rgba(170, 160, 212, 0.28) 0%, transparent 46%),
    radial-gradient(circle at 44% 38%,
      var(--emotion-encalma-3, rgba(170, 160, 212, 0.70)) 0%,
      var(--emotion-encalma-2, rgba(136, 200, 228, 0.50)) 40%,
      var(--emotion-encalma-1, rgba(212, 204, 168, 0.20)) 70%,
      transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-orb-float 6s var(--ease-organic) infinite alternate;
  filter: blur(2px);
}

/* Onda expansiva 1 — muy sutil */
.ambient-orb__wave--one {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 1px solid rgba(180, 168, 220, 0.18);
  animation: ambient-orb-pulse 5s var(--ease-soft) infinite;
}

/* Onda expansiva 2 — más exterior y más suave */
.ambient-orb__wave--two {
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  border: 1px solid rgba(136, 200, 228, 0.10);
  animation: ambient-orb-pulse 5s var(--ease-soft) infinite;
  animation-delay: -2.5s;
}

/* Contorno interior luminoso */
.ambient-orb__outline {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

/* Variantes de tamaño por contexto */
.ambient-orb--hero {
  width: 380px;
  height: 380px;
  top: 38%;
  opacity: 0.92;
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 200, 168, 0.44) 0%, transparent 30%),
    radial-gradient(circle at 74% 28%, rgba(136, 200, 228, 0.42) 0%, transparent 34%),
    radial-gradient(circle at 56% 72%, rgba(170, 160, 212, 0.32) 0%, transparent 42%),
    radial-gradient(circle at 42% 40%,
      rgba(255, 238, 224, 0.86) 0%,
      var(--emotion-conganas-1) 24%,
      var(--emotion-encalma-2) 54%,
      rgba(170, 160, 212, 0.28) 76%,
      transparent 100%);
}

.ambient-orb--detail {
  width: 220px;
  height: 220px;
  top: 50%;
  opacity: 0.80;
}

.ambient-orb--proposal {
  width: 200px;
  height: 200px;
  top: 44%;
  opacity: 0.70;
}

.ambient-orb--active {
  width: 320px;
  height: 320px;
  top: 48%;
  opacity: 0.85;
  /* El orbe refleja los colores de la emoción activa */
  background:
    radial-gradient(circle at 38% 34%, var(--ritual-tint-1, rgba(255,182,148,0.60)) 0%, transparent 46%),
    radial-gradient(circle at 66% 44%, var(--ritual-tint-2, rgba(136,200,228,0.48)) 0%, transparent 48%),
    radial-gradient(circle at 46% 70%, var(--ritual-tint-3, rgba(170,160,212,0.36)) 0%, transparent 52%);
}

.ambient-orb--closing {
  width: 240px;
  height: 240px;
  top: 46%;
  opacity: 0.75;
}

@keyframes ambient-orb-float {
  0%   { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -51%) scale(1.04); }
}

@keyframes ambient-orb-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%       { transform: scale(1.06); opacity: 0.3; }
}

/* ==========================================================================
   TAB BAR — Navegación global flotante
   ========================================================================== */

.tab-bar {
  position: fixed;
  bottom: max(var(--space-5), env(safe-area-inset-bottom, var(--space-4)));
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: none;
  height: var(--tab-bar-height);
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  background: var(--tab-bar-bg);
  backdrop-filter: var(--tab-bar-blur);
  -webkit-backdrop-filter: var(--tab-bar-blur);
  border: var(--tab-bar-border);
  border-radius: var(--tab-bar-radius);
  box-shadow: var(--tab-bar-shadow);
  z-index: var(--z-controls);
  column-gap: var(--space-1);
  padding: 0 var(--space-4);
  transition: opacity var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-in-out);
}

.tab-bar--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

/* Ítems laterales (Inicio, Biblioteca) */
.tab-bar__item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-soft);
  transition: color var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.tab-bar__item--active {
  color: var(--color-text-primary);
  background: rgba(22, 19, 19, 0.04);
}

/* Botón central — CTA de iniciar práctica */
.tab-bar__cta {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: transparent;
  box-shadow: none;
  color: #6f6764;
  transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  border: none;
  justify-self: center;
}

.tab-bar__cta:hover,
.tab-bar__cta:focus-visible {
  color: var(--color-text-primary);
  background: rgba(22, 19, 19, 0.04);
  outline: none;
}

.tab-bar__cta:active {
  transform: scale(0.92);
}

.app--screen-meditation-entry .tab-bar {
  grid-template-columns: auto auto auto;
}

.app--screen-meditation-entry .tab-bar__cta {
  display: none;
}