/*
 * Día Productivo app styles: the ambient page (clock, greeting, quote,
 * masthead controls, panels, effects). Loaded on the app page after the
 * bundled Bootstrap and app-base.css; the companion theme also loads it on
 * its other pages (see the theme's functions.php).
 */

/* Apply Montserrat as primary font */
body, .text-white, .stop-watch, h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
}

/* Apply monospace font to clock */
.date-time {
  font-family: 'Courier Prime', 'Courier New', 'Consolas', 'Monaco', 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace !important;
  font-weight: 400 !important; /* Regular weight */
  font-size: 6rem !important; /* Tamaño incrementado a 6rem */
}

/* Desktop Layout Adjustments - Solo para pantallas grandes */
@media (min-width: 1200px) {
  .desktop-layout .navbar-brand {
    margin-left: 1rem !important; /* Mover el título más a la izquierda */
  }
}

/* Mood Icon Styling - Base */
.mood-icon-container {
  position: absolute;
  left: 50%; /* Centrado por defecto para móvil */
  top: 50%;
  transform: translate(-50%, -50%); /* Centrado por defecto */
  z-index: 1; /* Same stacking context as other header icons */
}

.mood-icon {
  color: #f8f9fa; /* Match base icon color */
  opacity: 1; /* Match other icons' opacity */
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
  width: 22px;
  height: 22px;
}

.mood-icon:hover {
  opacity: 1;
  transform: scale(1.1);
  color: #007cba; /* Match hover color of other control icons */
}

.mood-icon-with-bubble {
  position: relative;
  display: inline-block;
}

/* Mood Description Display - Desktop (below mood icon) */
.mood-description-display {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 12;
  margin-top: 5px;
  display: none;
}

/* Mood Description Display - Mobile (like music player) */
.mood-description-display-mobile {
  position: fixed;
  top: 40px; /* Place near top instead of bottom */
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 10px; /* Smaller padding to avoid pushing layout */
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap; /* Keep on one line */
  word-wrap: normal;
  z-index: 12;
  max-width: 95vw;
  text-align: center;
  display: none;
}

.mood-description-display-mobile::before {
  display: none; /* Remove triangle on mobile bubble */
}

.mood-description-display::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.8);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mood Icon Responsive Sizing - Match Other Icons Exactly */
@media (max-width: 479.98px) {
  .mood-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 575.98px) {
  .mood-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 767.98px) {
  .mood-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (min-width: 768px) {
  .mood-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Ensure mood icon matches player control icons in mobile */
@media (max-width: 1199.98px) {
  .mobile-row-2 .mood-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-row-2 .mood-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 479.98px) {
  .mobile-row-2 .mood-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Page Structure - Header/Main/Footer */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#masthead {
  flex-shrink: 0;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.site-footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* Mobile Layout Styles */
@media (max-width: 1199.98px) {
  .mobile-layout {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    padding: 0.5rem 1rem; /* Reduced padding for better spacing */
  }
  
  /* First Row: Title + Location */
  .mobile-row-1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0.75rem !important; /* Reduced margin for tighter layout */
    padding: 0 0.25rem; /* Reduced padding to prevent overflow */
  }
  
  .mobile-row-1 .navbar-brand {
    margin-bottom: 0 !important;
    flex-shrink: 0;
    margin-left: -0.5rem; /* Less aggressive pull to prevent overflow */
  }
  
  .mobile-row-1 .user-location-container-mobile {
    flex-shrink: 0;
    margin-bottom: 0 !important;
    margin-right: -0.25rem; /* Less aggressive push to prevent overflow */
  }
  
  /* Second Row: Mood + Media Controls with tighter spacing */
  .mobile-row-2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 0.25rem; /* Reduced padding to match mobile-row-1 */
    position: relative;
    min-height: 36px; /* Slightly smaller to move controls up */
    margin-top: 0; /* Reduce gap below title */
  }
  
  /* Mood icon centered */
  .mobile-row-2 .mood-icon-container-mobile {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    flex: 0 0 auto;
    z-index: 1; /* keep behind floating panels like FX */
    top: 2px;
  }
  
  /* Music controls moved to the left */
  .mobile-row-2 .music-player-controls {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    position: absolute;
    left: 0.1rem;
    transform: none;
    z-index: 1;
    top: 2px;
  }
  
  /* Video controls on the right-center */
  .mobile-row-2 .video-player-controls {
    margin-left: auto !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    position: absolute;
    right: 25%; /* reserve space for fullscreen */
    transform: translateX(50%);
    z-index: 1;
    top: 2px;
  }
  
  /* FX controls on the far right */
  .mobile-row-2 .fx-player-controls {
    margin-left: auto !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    position: absolute;
    right: 5.5rem; /* give room for mixer, settings and fullscreen */
    z-index: 1;
    top: 2px;
  }

  .mobile-row-2 .mixer-controls {
    margin-left: auto !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    position: absolute;
    right: 2.2rem;
    z-index: 1;
    top: 2px;
  }
  
  /* Settings controls on the absolute right */
  .mobile-row-2 .settings-controls {
    margin-left: auto !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    position: absolute;
    right: 0.1rem;
    z-index: 1;
    top: 2px;
  }
  
  .mobile-row-2 .playerButtons {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* increase spacing to avoid overlap */
  }

  /* New Mobile Info Area */
  .mobile-info-area {
    position: relative;
    width: 100%;
    min-height: 30px; /* Larger reserved space */
    margin: 0rem 0 0.5rem 0; /* More breathing room */
    display: flex; /* Center content vertically */
    align-items: center;
    justify-content: center;
  }
  .mobile-info-area #mobileInfoContent {
    position: relative;
    display: none; /* Shown by JS when there is content */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    white-space: nowrap; /* Keep on one line */
    max-width: 100%; /* Use full available width of area */
  }

  /* Use the mobile info area to host the mood bubble instead of fixed bottom */
  .mobile-info-area .mood-description-display-mobile {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: none; /* toggled via JS */
    max-width: 100% !important;
    white-space: nowrap;
  }
  .mobile-info-area .mood-description-display-mobile:has(.mood-picker-content) {
    white-space: normal;
  }
  .mobile-info-area .mood-description-display-mobile::before {
    display: none; /* no arrow in info area */
  }
}

/* Specific class for clock font weight to override Bootstrap's font-weight-bold */
.date-time.clock-font-weight {
  font-weight: 400 !important; /* Regular weight for clock */
}

/* Tamaño del reloj en desktop */
@media (min-width: 992px) {
  .date-time {
    font-size: 6rem !important; /* Significativamente más grande en desktop */
  }
}

/* Tamaño del reloj en móvil */
@media (max-width: 991.98px) {
  .date-time {
    font-size: 5.6rem !important; /* Más grande para móvil */
  }
}

/* Estilos para la ubicación del usuario */
.user-location {
  font-size: 0.9rem !important;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.user-location:hover {
  opacity: 1;
}

.user-location i {
  font-size: 0.8rem;
}

/* Header location display styles */
.user-location-container {
  display: flex;
  align-items: center;
  margin-right: 2rem;
}

.user-location-container .user-location {
  font-size: 0.85rem !important;
  opacity: 0.9;
  white-space: nowrap;
}

.user-location-container-mobile {
  margin-bottom: 0.75rem;
}

.user-location-container-mobile .user-location {
  font-size: 0.8rem !important;
  opacity: 0.9;
  white-space: nowrap;
}

/* Desktop layout positioning */
@media (min-width: 1200px) {
  .desktop-layout {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 60px;
  }
  
  /* Left section: Logo + toggles + mood */
  .desktop-layout .navbar-brand {
    flex: 0 0 auto;
    margin-right: auto;
    display: flex;
    align-items: center;
  }

  .desktop-layout .navbar-brand .mood-icon-container {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-left: 1.25rem;
    z-index: 2;
  }

  /* Focus mode: hide content without shifting layout; keep focus button fixed at right */
  body.focus-mode .site > *:not(header#masthead):not(footer#colophon) { display: none !important; }
  /* Keep right section in place; hide its icons via opacity to avoid reflow */
  body.focus-mode header#masthead .desktop-layout .header-right-section { visibility: visible; pointer-events: auto; }
  body.focus-mode header#masthead .desktop-layout .header-right-section .icons { opacity: 0; pointer-events: none; }
  body.focus-mode header#masthead .desktop-layout .header-right-section .user-location-container { opacity: 0; pointer-events: none; }
  /* Explicitly hide common controls (desktop + mobile) */
  body.focus-mode #btnPlayerForward,
  body.focus-mode #btnPlayerForwardMobile,
  body.focus-mode #btnPlayerStopStart,
  body.focus-mode #btnPlayerStopStartMobile,
  body.focus-mode #btnMusicIcon,
  body.focus-mode #btnMusicIconMobile,
  body.focus-mode #btnFxIcon,
  body.focus-mode #btnFullscreenToggle { opacity: 0 !important; pointer-events: none !important; }
  /* Show only the focus button */
  body.focus-mode #btnToggleFocus { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: opacity 0.5s ease; }
  body.focus-mode #btnToggleFocus.ui-hidden { opacity: 0 !important; pointer-events: none !important; }
  /* Also ensure brand group and mood icon don't change layout */
  body.focus-mode header#masthead .navbar-brand { visibility: hidden; pointer-events: none; }
  body.focus-mode header#masthead .mood-icon-container { visibility: hidden; pointer-events: none; }
  /* Make mood icon opacity follow the same fade timing as other icons to avoid lag */
  body.focus-mode #moodIcon,
  body.focus-mode #moodIconMobile { opacity: 0 !important; pointer-events: none !important; }
  /* Keep header height/spacing; make background minimal */
  body.focus-mode header#masthead { background: transparent !important; box-shadow: none !important; }
  /* Footer stays visible but hide info button, AI label, and admin links */
  body.focus-mode footer#colophon .footer-info-button { display: none !important; }
  body.focus-mode footer#colophon .footer-ai-generated { display: none !important; }
  body.focus-mode.record-mode footer#colophon .footer-ai-generated { display: inline-flex !important; }
  body.focus-mode footer#colophon .admin-debug-link,
  body.focus-mode footer#colophon #btnRecordMode { display: none !important; }
  /* Hide mobile layout in focus mode */
  body.focus-mode header#masthead .mobile-layout { display: none !important; }
  
  /* Right section: Location + Media controls as a group */
  .desktop-layout .header-right-section {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
  }
  
  .desktop-layout .user-location-container {
    display: flex;
    align-items: center;
  }
  
  .desktop-layout .media-player-controls {
    display: flex !important;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
  }

  /* Force consistent icon size in header right section */
  .desktop-layout .header-right-section .icons {
    width: 22px !important;
    height: 22px !important;
  }

  .desktop-layout #btnSettingsIcon,
  .desktop-layout #btnMixerIcon,
  .desktop-layout #moodIcon {
    width: 20px !important;
    height: 20px !important;
  }
}


header#masthead {
	box-shadow: none;
}


body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    padding: 0;
}

div.site {
	position: relative;
	z-index: 2;
}

div.site::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(black, transparent, transparent, transparent, transparent, black);
	pointer-events: none;
	z-index: -1;
	opacity: 1;
	transition: opacity 0.8s ease-in-out;
}

body.focus-mode.fullscreen-active div.site::before {
	opacity: 0;
}

body.focus-mode footer#colophon .footer-ai-generated {
	display: none !important;
}

body.focus-mode.record-mode footer#colophon .footer-ai-generated {
	display: inline-flex !important;
}

#content.site-content {
	padding-bottom: 1rem;
	padding-top: 0;
	flex: 1;
}

footer#colophon {
	display: block;
	width: 100%;
	text-align: center;
	background-color: black;
	margin-top: auto;
	position: relative;
	z-index: 1003; /* Above gradient and other elements */
}

.date-time, .stop-watch {
  margin-bottom: 0px;
}

.icons {
  color: #f8f9fa;
  width: 32px;
  height: 32px;
}


.redTimer {
  color: #f17e7e;
}

.container .text-white {
  text-shadow: 1px 0px 1px #2c2c2c, -1px 0 1px #2c2c2c, 0 1px 1px #2c2c2c, 0 -1px 1px #2c2c2c, 1px 1px 1px #2c2c2c, -1px -1px 1px #2c2c2c, 1px -1px 1px #2c2c2c, -1px 1px 1px #2c2c2c;
}

.container svg {
  filter: drop-shadow(1px 0px 0px #2c2c2c) drop-shadow(0px 1px 0px #2c2c2c) drop-shadow(-1px 0px 0px #2c2c2c) drop-shadow(0px -1px 0px #2c2c2c);
}

/* Responsive Design - All Screen Sizes */

/* Widget containers base styling */
.widget-container {
  min-height: 100px;
}

/* Icons base styling with responsive sizing */
.icons {
  cursor: auto;
  transition: all 0.2s ease;
}

/* Efecto hover para TODOS los iconos por defecto */
.icons:hover {
  cursor: pointer;
  transform: scale(1.1);
  color: #007cba; /* unify hover color everywhere */
}

/* Specific hover for interactive icons - higher specificity */
.icons.feather-play:hover,
.icons.feather-pause:hover,
.icons.feather-rotate-ccw:hover {
  transform: scale(1.1) !important;
}

/* Music icon - enable same hover as other buttons */
i.icons.feather-music,
.icons.feather-music {
  cursor: pointer !important;
  transition: color 0.3s ease, transform 0.2s ease !important;
  pointer-events: auto !important;
}

i.icons.feather-music:hover,
.icons.feather-music:hover {
  transform: scale(1.1) !important;
  color: #007cba !important;
}

/* Next button always visible with initial disabled state */
.icons.feather-skip-forward {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s ease;
  pointer-events: auto;
  visibility: visible;
  color: #6c757d; /* Gray color for disabled state */
  cursor: not-allowed;
}

.icons.feather-skip-forward.enabled {
  color: white;
  cursor: pointer;
}

.icons.feather-skip-forward.disabled {
  color: #6c757d;
  cursor: not-allowed;
}

/* Hover effect for skip-forward when enabled */
.icons.feather-skip-forward.enabled:hover {
  transform: scale(1.1);
  color: #007cba;
}

/* Only show hand cursor on devices that truly support hover */
@media (hover: hover) and (pointer: fine) {
  .icons { cursor: default; }
  .icons:hover { cursor: pointer; }
}

/* On touch devices, emulate hover color on active (tap) to give feedback */
@media (hover: none) and (pointer: coarse) {
  .icons:active {
    color: #007cba;
    transform: scale(1.1);
  }
}

/* Footer attribution animation styles - Similar to music title display */
.footer-attribution {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1001;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-attribution::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.8);
}

/* Show/hide classes removed - now using jQuery fadeIn/fadeOut */

/* Footer centering and positioning */
.site-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative; /* Needed for absolute positioning of attribution */
  text-align: center;
  z-index: 1003; /* Ensure footer content is above gradient */
}

/* Footer info button - invisible wrapper for better touch target */
.footer-info-button {
  background: none;
  border: none;
  padding: 4px; /* Reduced padding to keep icon small */
  margin: 0 6px; /* Adjust margin to maintain spacing */
  cursor: pointer;
  pointer-events: auto !important;
  z-index: 1000;
  position: relative;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.footer-info-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Footer info icon styling - override responsive icon sizing */
.icons.footer-info-icon {
  width: 14px !important;
  height: 14px !important;
  cursor: pointer;
  pointer-events: none; /* Let button handle clicks */
  display: block;
}

.icons.footer-info-icon:hover {
  transform: scale(1.1);
}

.footer-ai-generated {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.footer-ai-generated img {
  display: block;
  height: 28px;
  width: auto;
  filter: none;
  pointer-events: none;
}

/* Small devices (phones, up to 576px) */
@media (max-width: 575.98px) {
  .icons {
    width: 28px;
    height: 28px;
  }
  
  /* Make footer info button more touchable on mobile but keep icon small */
  .footer-info-button {
    padding: 8px !important; /* Moderate touch target */
    margin: 0 4px !important;
  }
  
  .icons.footer-info-icon {
    width: 14px !important; /* Keep original small size */
    height: 14px !important;
  }
  
  .widget-container {
    margin: 0.75rem 0;
    padding: 1rem;
  }
  
  .display-6 {
    font-size: 1.5rem !important;
  }
  
  .h3 {
    font-size: 1.25rem !important;
  }
  
}

/* Medium devices (tablets, 576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .icons {
    width: 32px;
    height: 32px;
  }
  
  .widget-container {
    margin: 1rem 0;
    padding: 1.5rem;
  }
  
  .display-6 {
    font-size: 1.75rem !important;
  }
}

/* Large devices (desktops, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .icons {
    width: 36px;
    height: 36px;
  }
  
  .widget-container {
    margin: 1.5rem 0;
    padding: 2rem;
  }
}

/* Extra large devices (large desktops, 992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .icons {
    width: 40px;
    height: 40px;
  }
  
  .widget-container {
    margin: 2rem 0;
    padding: 2.5rem;
  }
  
  .display-lg-5 {
    font-size: 2.5rem !important;
  }
  
  .display-lg-4 {
    font-size: 3rem !important;
  }
}

/* XXL devices (larger desktops, 1200px and up) */
@media (min-width: 1200px) {
  .icons {
    width: 44px;
    height: 44px;
  }
  
  .widget-container {
    margin: 2.5rem 0;
    padding: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .display-lg-5 {
    font-size: 3rem !important;
  }
  
  .display-lg-4 {
    font-size: 3.5rem !important;
  }
  
  .h-lg-2 {
    font-size: 2rem !important;
  }
}

/* Ultra-wide screens (1400px and up) */
@media (min-width: 1400px) {
  .widget-container {
    max-width: 900px;
    padding: 3.5rem;
  }
  
  .icons {
    width: 48px;
    height: 48px;
  }
}

/* Admin Debug Link in Footer */
.admin-debug-link {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-block;
  margin-left: 10px;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.2s ease;
  vertical-align: middle;
}

.admin-debug-link:hover {
  opacity: 1 !important;
  color: #007cba !important;
}

.admin-debug-link:focus {
  outline: 1px dotted #007cba;
  outline-offset: 2px;
}

/* Ensure Feather icons in debug link are properly sized */
.admin-debug-link svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor;
}

/* Media Player Controls Container */
.media-player-controls {
  color: white;
  display: flex !important;
  align-items: center;
  z-index: 1000;
  position: relative;
  gap: 0.75rem;
  flex-direction: row;
}

/* Music Player Controls - Base Styles */
.music-player-controls {
  color: white;
  display: flex !important;
  align-items: center;
  z-index: 1000;
  position: relative;
}

.music-player-controls .playerButtons {
  display: flex;
  align-items: center;
}

.music-player-controls .icons {
  color: white;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  vertical-align: middle;
}

.music-player-controls .icons:hover {
  color: #007cba;
  transform: scale(1.1);
}

/* Ensure music icon is clickable */
#btnMusicIcon {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Video enabled: hide static layer only when current visual has a video (playlist entry has video_url) */
body.video-mode-active:not(.video-not-available) #bg-static {
  visibility: hidden;
}

/* Settings toggle help text (e.g. video enabled/disabled) */
.settings-help-text {
  display: block;
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  line-height: 1.3;
}

.video-mode-toggle {
  accent-color: #007cba;
  cursor: pointer;
}

.video-mode-toggle:disabled { cursor: not-allowed; }

/* FX Player Controls - Base Styles */
.fx-player-controls {
  color: white;
  display: flex !important;
  align-items: center;
  z-index: 1000;
  position: relative;
}

.fx-player-controls .playerButtons {
  display: flex;
  align-items: center;
}

.fx-player-controls .icons {
  color: white;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  vertical-align: middle;
}

.fx-player-controls .icons:hover {
  color: #007cba;
  transform: scale(1.1);
}

/* Ensure FX icon is clickable */
#btnFxIcon, #btnFxIconMobile {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* FX Menu Display */
.fx-menu-display {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1001;
  margin-top: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 160px;
}

.fx-menu-display::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.9);
}

.fx-menu-content {
  padding: 12px;
}

.fx-menu-title {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fx-option {
  margin-bottom: 8px;
}

.fx-option:last-child {
  margin-bottom: 0;
}

.fx-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.fx-checkbox-label:hover {
  color: #007cba;
}

.fx-checkbox {
  margin-right: 8px;
  margin-bottom: 0;
  cursor: pointer;
  accent-color: #007cba;
}

.fx-option-text {
  font-size: 13px;
  line-height: 1.3;
  user-select: none;
}

/* Mixer Controls */
.mixer-controls {
  position: relative;
}

.mixer-controls .icons {
  width: 22px;
  height: 22px;
  color: white;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  vertical-align: middle;
}

.mixer-controls .icons:hover {
  color: #007cba;
  transform: scale(1.1);
}

#btnMixerIcon, #btnMixerIconMobile {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.mixer-menu-display {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 6px;
  font-size: 14px;
  z-index: 1001;
  margin-top: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 200px;
}

.mixer-menu-display::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.9);
}

.mixer-menu-content {
  padding: 12px;
}

.mixer-menu-title {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mixer-option {
  margin-bottom: 10px;
}

.mixer-option:last-child {
  margin-bottom: 0;
}

.mixer-option-label {
  display: block;
  margin: 0 0 4px 0;
  font-size: 13px;
  line-height: 1.3;
  user-select: none;
}

.mixer-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mixer-mute {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #ccc;
  cursor: pointer;
}

.mixer-mute:hover {
  color: #ffffff;
}

.mixer-slider {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  accent-color: #007cba;
}

/* Settings Panel */
.settings-controls {
  position: relative;
}

.settings-controls .icons {
  width: 22px;
  height: 22px;
  color: white;
}

.settings-controls .icons:hover {
  color: #007cba;
  transform: scale(1.1);
}

.settings-panel {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  z-index: 1001;
  margin-top: 5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 300px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.settings-panel::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.9);
}

.settings-content {
  padding: 16px;
}

/* Desktop: a full-height side panel sliding in from the right, so the page
   stays visible while changing what it shows. */
@media (min-width: 1200px) {
  .settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-height: none;
    margin-top: 0;
    border-radius: 0;
    border-width: 0 0 0 1px;
    z-index: 1050;
    animation: dp-settings-slide-in 0.3s ease-out;
  }

  .settings-panel::before { display: none; }

  .settings-content { padding: 20px 24px; }
}

@keyframes dp-settings-slide-in {
  from { transform: translateX(40px); }
  to { transform: translateX(0); }
}

.settings-header-title {
  font-size: 16px;
  font-weight: 600;
}

.settings-close {
  background: none;
  border: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  opacity: 0.7;
  padding: 0 4px;
  cursor: pointer;
}

.settings-close:hover { opacity: 1; }

.visibility-settings-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.visibility-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  cursor: pointer;
}

.visibility-toggle { accent-color: #007cba; cursor: pointer; }

/* Ajustes → Mostrar: hide the clock, greeting and/or quote (and a box once
   everything in it is hidden). */
body.hide-clock .date-time,
body.hide-greeting .greeting-text,
body.hide-quote .quote-text-container,
body.hide-clock.hide-greeting .widget-container { display: none !important; }

.settings-user-info {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}

.settings-user-info .text-white {
  text-shadow: none !important;
}

.user-logged-in-info {
  font-size: 13px;
  color: #fff;
}

.user-display-name {
  font-weight: 600;
}

.btn-logout {
  opacity: 0.7;
  transition: opacity 0.2s;
  cursor: pointer;
  padding: 4px;
}

.btn-logout:hover {
  opacity: 1;
}

.btn-login-register {
  text-shadow: none !important;
}

.settings-title {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 700;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.settings-section {
  margin-bottom: 16px;
}

.settings-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mood-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mood-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.mood-settings-row.mood-disabled {
  opacity: 0.5;
}

.mood-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mood-enable-toggle {
  accent-color: #007cba;
  cursor: pointer;
}

.mood-label {
  font-size: 13px;
}

.mood-row-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mood-start-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  width: 75px;
}

.mood-time-sep {
  font-size: 11px;
  color: #666;
}

.mood-end-time {
  font-size: 12px;
  color: #aaa;
  min-width: 40px;
  text-align: center;
}

/* Mood Schedule Toggle */
.mood-schedule-toggle-row {
  margin-bottom: 8px;
}

.mood-schedule-toggle-label {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 2px;
}

.mood-schedule-toggle {
  accent-color: #007cba;
  cursor: pointer;
}

.mood-schedule-help {
  display: block;
  margin-top: 2px;
}

/* Mood Picker Display */
.mood-picker-display {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px;
  border-radius: 8px;
  z-index: 12;
  margin-top: 5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mood-picker-content {
  display: flex;
  gap: 4px;
}

.mood-picker-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.mood-picker-btn svg {
  width: 14px;
  height: 14px;
}

.mood-picker-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.mood-picker-btn.active {
  background: rgba(0, 124, 186, 0.4);
  border-color: #007cba;
}

/* Mobile mood picker in unified bubble */
.mood-description-display-mobile .mood-picker-content {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.mood-description-display-mobile .mood-picker-btn {
  padding: 5px 8px;
  font-size: 11px;
}

.timezone-settings {
  display: flex;
  flex-direction: column;
}

.timezone-auto-label {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 4px;
}

.timezone-select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-size: 12px !important;
  height: auto !important;
  padding: 4px !important;
}

.timezone-select option {
  background-color: #222;
  color: white;
}

.keyboard-shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.keyboard-shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.keyboard-shortcut-item kbd {
  min-width: 56px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 6px;
  text-align: center;
}

/* Music Title Display */
.music-title-display {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  white-space: normal;
  min-width: 286px;
  max-width: 416px;
  z-index: 1001;
  margin-top: 5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.music-info-mood {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.music-info-current {
  font-weight: 500;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.4;
}

.music-info-next {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.music-next-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 4px;
  display: block;
}

.music-next-item {
  display: block;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.music-title-display::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.85);
}

/* Video Title Display */
.video-title-display {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1001;
  margin-top: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.video-title-display::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.8);
}

/* Next button always visible - inherits size and margin from other icons */

/* Desktop/Tablet Layout (≥768px) */
@media (min-width: 768px) {
  .media-player-controls {
    margin-left: auto;
  }
  
  .music-player-controls .icons,
  .video-player-controls .icons,
  .fx-player-controls .icons,
  .mixer-controls .icons {
    width: 22px;
    height: 22px;
    margin: 0 0.375rem;
  }
}

/* Extra spacing for larger screens */
@media (min-width: 992px) {
  .music-player-controls .icons,
  .video-player-controls .icons,
  .fx-player-controls .icons,
  .mixer-controls .icons {
    margin: 0 0.5rem;
  }
  
  .music-player-controls .icons.hide {
    margin: 0 0.5rem !important;
  }
}

/* Mobile Layout (<768px) - Additional adjustments */
@media (max-width: 767.98px) {
  .site {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }
  
  .navbar {
    padding: 0.25rem 0; /* Reduced navbar padding for tighter layout */
  }
  
  .mobile-layout {
    padding: 0.25rem 0.75rem !important; /* Reduced padding for better fit */
  }
  
  .mobile-row-1 {
    margin-bottom: 0.5rem !important; /* Even tighter spacing for smaller screens */
  }
  
  .mobile-row-2 {
    padding: 0 0.25rem !important; /* Consistent with updated layout */
  }
  
  .mobile-row-2 .playerButtons {
    gap: 0.25rem !important;
  }
  
  /* Adjust positioning for medium mobile screens */
  .mobile-row-2 .mood-icon-container-mobile {
    left: 0.15rem; /* Consistent with updated layout */
  }
  
  .mobile-row-2 .music-player-controls {
    left: 21%; /* Slightly adjusted for better balance */
  }
  
  .mobile-row-2 .video-player-controls {
    right: 38%; /* Adjusted for settings */
  }
  
  .mobile-row-2 .fx-player-controls {
    right: 26%; /* Adjusted for mixer + settings */
  }

  .mobile-row-2 .mixer-controls {
    right: 9%;
    position: absolute;
    z-index: 1;
    top: 2px;
  }

  .mobile-row-2 .settings-controls {
    right: 0.15rem;
    position: absolute;
    z-index: 1;
    top: 2px;
  }
  
  .music-player-controls .playerButtons,
  .video-player-controls .playerButtons,
  .fx-player-controls .playerButtons,
  .mixer-controls .playerButtons {
    gap: 0.125rem !important;
  }
  
  /* Mobile title display adjustments */
  .music-title-display,
  .video-title-display,
  .fx-menu-display,
  .mixer-menu-display,
  .settings-panel,
  .footer-attribution,
  #moodDescriptionDisplayMobile,
  #lightingPickerDisplayMobile {
    position: fixed;
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
  }

  .footer-attribution {
    bottom: 40px;
  }

  .fx-menu-display,
  .mixer-menu-display,
  .settings-panel {
    top: 40px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: 95vw;
    min-width: 260px; /* wider on mobile */
  }
  
  /* Remove triangle for FX, mixer and settings menu on mobile */
  .fx-menu-display::before,
  .mixer-menu-display::before,
  .settings-panel::before { display: none; }
  
  /* Mobile FX, mixer and settings menu specific adjustments */
  .fx-menu-display,
  .mixer-menu-display,
  .settings-panel {
    white-space: normal;
    min-width: 260px; /* wider on mobile */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  
  .music-player-controls .icons,
  .video-player-controls .icons,
  .fx-player-controls .icons,
  .mixer-controls .icons {
    width: 28px;
    height: 28px;
    margin: 0;
  }
  
  /* Prevent horizontal scroll on mobile */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .site {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .container {
    max-width: 100vw !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix clock and greeting alignment on mobile */
  .container-fluid {
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure text centering works properly */
  .text-center {
    text-align: center !important;
  }
  
  .widget-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Force perfect centering for date/time elements */
  .date-time, .greeting-text {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
  }
  
  /* Additional centering for clock widget */
  .widget-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .widget-container h1.date-time {
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
  }
  
  /* Ensure the parent container is perfectly centered */
  .bg-secondary.rounded {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}

/* Greeting text sizing - double the default size with responsive-friendly units */
.greeting-text {
  font-size: 2em !important; /* 2x current context size */
  line-height: 1.2;
}

/* Small Mobile (<576px) */
@media (max-width: 575.98px) {
  .music-player-controls .icons,
  .video-player-controls .icons,
  .fx-player-controls .icons,
  .mixer-controls .icons,
  .settings-controls .icons {
    width: 24px;
    height: 24px;
  }
}

/* Extra Small Mobile (<480px) */
@media (max-width: 479.98px) {
  .music-player-controls .icons,
  .video-player-controls .icons,
  .fx-player-controls .icons,
  .mixer-controls .icons,
  .settings-controls .icons {
    width: 22px;
    height: 22px;
  }
  
  .mobile-row-2 {
    padding: 0 0.25rem !important;
  }
  
  .mobile-row-2 .playerButtons {
    gap: 0.15rem !important;
  }
  
  /* Adjust positioning for very small screens */
  .mobile-row-2 .mood-icon-container-mobile {
    left: 0.05rem; /* Very slight adjustment from edge */
  }
  
  .mobile-row-2 .music-player-controls {
    left: 19%; /* Slightly more space for very small screens */
  }
  
  .mobile-row-2 .video-player-controls {
    right: 36%; /* Slightly more space for very small screens */
  }
  
  .mobile-row-2 .fx-player-controls {
    right: 22%; /* Adjusted for mixer + settings */
  }

  .mobile-row-2 .mixer-controls {
    right: 8%;
    position: absolute;
    z-index: 1;
    top: 2px;
  }

  .mobile-row-2 .settings-controls {
    right: 0.05rem;
    position: absolute;
    z-index: 1;
    top: 2px;
  }
  
  .mobile-layout {
    padding: 0.2rem 0.5rem !important; /* Even more compact for tiny screens */
  }
  
  .mobile-row-1 .user-location-container-mobile .user-location {
    font-size: 0.7rem !important;
  }
  
  .navbar-brand .site-title {
    font-size: 1rem !important;
  }
}

/* Fix footer spacing on mobile */
@media (max-width: 768px) {
  /* Fix background to cover full viewport including when address bar hides */
  body {
    min-height: 100vh !important;
    min-height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  
  .site {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  
  #content.site-content {
    padding-bottom: 1rem;
  }
  
  .site-footer {
    margin-top: auto;
    background: transparent !important;
    position: relative;
  }
  
  /* Mobile footer attribution - tooltip style adjustments */
  /*
  .footer-attribution {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1001;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  */

  /* Ensure footer info doesn't have extra spacing on mobile */
  /*
  .site-info {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  */
  
  /* Prevent any element from causing horizontal overflow */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* FX Audio Icon Styling */
.fx-audio-icon {
  width: 12px !important;
  height: 12px !important;
  margin-left: 4px;
  opacity: 0.7;
  vertical-align: middle;
  stroke-width: 2.5;
  color: #ffc107; /* Gold color to indicate audio */
}

/* Background video positioning (moved from inline styles) */
#bg-video, .bg-video-element, #bg-static {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /* El ratio se ajustará dinámicamente por JS, por defecto 16/9 */
  aspect-ratio: var(--bg-aspect-ratio, 16 / 9);
  object-fit: cover;
}

#bg-video-bridge.bg-video-bridge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: var(--bg-aspect-ratio, 16 / 9);
  object-fit: cover;
  transition: opacity 1s ease-in-out;
  z-index: 3;
  pointer-events: none;
}

/* Static background container */
#bg-static {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  background-color: transparent;
}

#video-background-container {
  background-color: black !important;
}

/* PixiJS effects layer (moved from inline styles) */
#pixi-effects {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Global cursor default */
html, body { cursor: auto; }

/* Only show pointer when hovering actionable icons */
.icons { cursor: auto; }
.icons:hover { cursor: pointer; }

/* Preserve explicit states for enabled/disabled where needed */
.icons.feather-skip-forward.enabled:hover { cursor: pointer; }
.icons.feather-skip-forward.disabled, .video-player-controls .icons.disabled { cursor: not-allowed; }

/*
 * Formerly in production's Customizer "Additional CSS" (database, not the
 * theme), so any other install showed grey translucent boxes behind the clock
 * and quote. Kept identical to that CSS so production looks the same.
 */
div.entry-content .bg-secondary {
	background-color: transparent !important;
}

footer, footer div.container {
	max-width: 95%;
}

.playerButtons {
	display: inline-block;
	break-inside: avoid;
}