/* ===================== ESTILOS ESPECÍFICOS VIEW-FRASE ===================== */
/* Nota: Estilos base (fonts, reset, body, animaciones comunes) están en yonunca_base.css */

/* ===================== LOGO CONTAINER ESPECÍFICO FRASE ===================== */
/* Logo container único para frase - sin herencia */
/* IMPORTANTE: La visibilidad se controla completamente desde spa_transitions.css */
/* No establecer opacity/visibility aquí para evitar conflictos - spa_transitions.css lo maneja cuando .spa-view.active */
.logo-container_frase {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
  /* Sin opacity/visibility - spa_transitions.css lo maneja con #view-frase.spa-view.active */
  /* La animación moveUpDown se controla desde spa_transitions.css */
}

/* Logo único para frase - sin herencia */
#view-frase .logo_frase,
.logo_frase {
  display: block;
  width: 50vw;
  height: auto;
  margin-top: 15vh;
  margin-bottom: 4vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  font-size: 8vw;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  /* Sin opacity/visibility - spa_transitions.css lo maneja */
  /* La animación se aplica al logo-container, no al logo */
  will-change: transform;
}

/* ===================== FRASE ESPECÍFICA ===================== */
/* IMPORTANTE: La visibilidad se controla desde spa_transitions.css cuando la vista está activa */
#view-frase .phrase {
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: 20vh; /* Espacio adicional para que el Lottie no se superponga */
  /* Sin opacity/visibility - spa_transitions.css lo maneja */
}

#view-frase .phrase p {
  display: block;
  font-size: 4vw;
  font-weight: bold;
  color: white;
  margin-bottom: 20vh; /* Espacio adicional para el Lottie fijo */
  margin-top: 10vh;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  letter-spacing: 0.3vw;
  text-shadow: 0.1vw 0.1vw 0.2vw rgb(244, 29, 29), -0.1vw -0.1vw 0.2vw rgb(0, 255, 255);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  position: relative;
  z-index: 2; /* Por encima del Lottie */
  /* Sin opacity/visibility - spa_transitions.css lo maneja */
}

/* ===================== LOTTIE CONTAINER ESPECÍFICO FRASE ===================== */
#view-frase #lottie-container {
  width: 60vw !important;
  height: 5vh !important;
  background-color: rgba(240, 240, 240, 0) !important;
  border-radius: 1.5vh !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  display: inline-block !important;
  position: fixed !important; /* Fijo en la parte inferior */
  left: 50% !important;
  transform: translateX(-50%) !important; /* Centrado horizontalmente */
  bottom: 10vh !important; /* Posicionado en la parte inferior */
  margin-top: 0 !important; /* Eliminar margin-top que causaba superposición */
  z-index: 5 !important;
  
  /* Desactivar todas las interacciones y zoom */
  pointer-events: none !important;
  user-select: none !important;
  touch-action: none !important;
  overflow: hidden !important;
  outline: none !important;
}

/* Desactivar interacciones en SVG del Lottie */
#view-frase #lottie-container svg {
  pointer-events: none !important;
  user-select: none !important;
  touch-action: none !important;
  transform: none !important;
}

/* Desactivar cualquier efecto hover en el contenedor */
#view-frase #lottie-container:hover {
  transform: translateX(-50%) !important;
  scale: 1 !important;
}

/* Desactivar interacciones en todos los elementos hijo del Lottie */
#view-frase #lottie-container * {
  pointer-events: none !important;
  user-select: none !important;
  touch-action: none !important;
}

/* ===================== BOTÓN PLAY/PAUSE ===================== */
#view-frase .play-pause-btn {
  background: linear-gradient(90deg, #2563eb 60%, #38bdf8 100%);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(56,189,248,0.10);
  transition: background 0.2s, transform 0.1s;
  position: absolute;
  left: calc(100% + 0.8rem); /* a la derecha del lottie */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: auto !important; /* reactivar eventos solo para el botón */
}

#view-frase .play-pause-btn:hover { 
  transform: translateY(-50%) scale(1.04); 
}

#view-frase .play-pause-icon { 
  width: 1.2em; 
  height: 1.2em; 
  object-fit: contain; 
}

/* ===================== LOTTIE TIMER ===================== */
#view-frase #lottie-container-timer {
  width: 20vw;
  height: auto;
  background-color: rgba(240, 240, 240, 0);
  border-radius: 1.5vh;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: inline-block;
}

/* ===================== TÍTULO Y OTROS ===================== */
#view-frase .title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 40px;
}

#view-frase .icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

#view-frase .icon img {
  width: 5vw;
  height: auto;
}