<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
 * Mobile Components System - Cofinancia.me
 * Unified component architecture following BEM methodology
 * 
 * Architecture: Block Element Modifier (BEM) + Atomic Design
 * Dependencies: design-tokens.css (must be loaded first)
 * Browser Support: Modern browsers with CSS Custom Properties
 */

/* ============================================
 * BASE MOBILE VIEWER COMPONENT
 * ============================================ */

/**
 * .viewer-mobile-nav
 * Base component for all mobile navigation interfaces
 * Provides consistent positioning, styling, and behavior
 */
.viewer-mobile-nav {
  /* Positioning - Fixed to viewport with safe area respect */
  position: fixed !important;
  bottom: var(--mobile-nav-bottom-safe) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  
  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--mobile-nav-gap) !important;
  
  /* Styling */
  background: var(--mobile-nav-background) !important;
  backdrop-filter: var(--mobile-nav-backdrop-blur) !important;
  -webkit-backdrop-filter: var(--mobile-nav-backdrop-blur) !important;
  border-radius: var(--mobile-nav-border-radius) !important;
  padding: var(--mobile-nav-padding) !important;
  
  /* Elevation */
  box-shadow: var(--shadow-lg) !important;
  z-index: var(--mobile-nav-z-index) !important;
  
  /* Accessibility */
  user-select: none !important;
  -webkit-user-select: none !important;
  
  /* Performance */
  will-change: transform !important;
  contain: layout style paint !important;
}

/**
 * .viewer-mobile-nav__button
 * Individual navigation button within mobile nav
 */
.viewer-mobile-nav__button {
  /* Sizing */
  width: var(--mobile-nav-button-size) !important;
  height: var(--mobile-nav-button-size) !important;
  min-width: var(--touch-target-min) !important;
  min-height: var(--touch-target-min) !important;
  
  /* Reset browser defaults */
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Styling */
  background: var(--mobile-nav-button-background) !important;
  color: var(--mobile-nav-button-color) !important;
  border-radius: var(--mobile-nav-button-radius) !important;
  
  /* Typography */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  
  /* Interactive */
  cursor: pointer !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  
  /* Touch optimization */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* Performance */
  will-change: transform, background-color !important;
}

/**
 * .viewer-mobile-nav__button--active
 * Active state modifier for navigation buttons
 */
.viewer-mobile-nav__button--active {
  background: var(--mobile-nav-button-background-active) !important;
  color: var(--mobile-nav-button-color-active) !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.05) !important;
}

/**
 * .viewer-mobile-nav__button:hover
 * Hover state for navigation buttons
 */
.viewer-mobile-nav__button:hover {
  background: var(--interactive-secondary-hover) !important;
  transform: scale(1.1) !important;
}

/**
 * .viewer-mobile-nav__button:focus
 * Focus state for accessibility
 */
.viewer-mobile-nav__button:focus {
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/**
 * .viewer-mobile-nav__button:active
 * Press state for tactile feedback
 */
.viewer-mobile-nav__button:active {
  transform: scale(0.95) !important;
  transition-duration: calc(var(--duration-fast) / 2) !important;
}

/* ============================================
 * MOBILE VIEWER VISIBILITY CONTROL
 * ============================================ */

/**
 * Hide mobile navigation on desktop by default
 * Show only on mobile viewports
 */
.viewer-mobile-nav {
  display: none !important;
}

@media (max-width: 768px) {
  .viewer-mobile-nav {
    display: flex !important;
  }
}

/* ============================================
 * SPECIFIC VIEWER IMPLEMENTATIONS
 * ============================================ */

/**
 * Floor Viewer Mobile Navigation
 * Applies base component with floor-specific context
 */
.mobile-floor-nav {
  /* Inherit all base styles */
  @apply .viewer-mobile-nav;
}

.mobile-floor-nav .mobile-floor-btn {
  /* Inherit all base button styles */
  @apply .viewer-mobile-nav__button;
}

.mobile-floor-nav .mobile-floor-btn.active {
  /* Inherit active state styles */
  @apply .viewer-mobile-nav__button--active;
}

/**
 * Location Viewer Mobile Navigation
 * Applies base component with location-specific context
 */
.mobile-location-nav {
  /* Inherit all base styles */
  @apply .viewer-mobile-nav;
}

.mobile-location-nav .mobile-location-btn {
  /* Inherit all base button styles */
  @apply .viewer-mobile-nav__button;
}

.mobile-location-nav .mobile-location-btn.active {
  /* Inherit active state styles */
  @apply .viewer-mobile-nav__button--active;
}

/* ============================================
 * FALLBACK FOR BROWSERS WITHOUT @apply
 * ============================================ */

/* 
 * Note: @apply is not standard CSS. For maximum compatibility,
 * we'll duplicate the rules directly below.
 */

/* Floor Navigation Fallback */
.mobile-floor-nav {
  position: fixed !important;
  bottom: var(--mobile-nav-bottom-safe) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--mobile-nav-gap) !important;
  background: var(--mobile-nav-background) !important;
  backdrop-filter: var(--mobile-nav-backdrop-blur) !important;
  -webkit-backdrop-filter: var(--mobile-nav-backdrop-blur) !important;
  border-radius: var(--mobile-nav-border-radius) !important;
  padding: var(--mobile-nav-padding) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: var(--mobile-nav-z-index) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  will-change: transform !important;
  contain: layout style paint !important;
}

.mobile-location-nav {
  position: fixed !important;
  bottom: var(--mobile-nav-bottom-safe) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--mobile-nav-gap) !important;
  background: var(--mobile-nav-background) !important;
  backdrop-filter: var(--mobile-nav-backdrop-blur) !important;
  -webkit-backdrop-filter: var(--mobile-nav-backdrop-blur) !important;
  border-radius: var(--mobile-nav-border-radius) !important;
  padding: var(--mobile-nav-padding) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: var(--mobile-nav-z-index) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  will-change: transform !important;
  contain: layout style paint !important;
}

/* Button Styles Fallback */
.mobile-floor-nav .mobile-floor-btn,
.mobile-location-nav .mobile-location-btn {
  width: var(--mobile-nav-button-size) !important;
  height: var(--mobile-nav-button-size) !important;
  min-width: var(--touch-target-min) !important;
  min-height: var(--touch-target-min) !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mobile-nav-button-background) !important;
  color: var(--mobile-nav-button-color) !important;
  border-radius: var(--mobile-nav-button-radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  will-change: transform, background-color !important;
}

/* Active State Fallback */
.mobile-floor-nav .mobile-floor-btn.active,
.mobile-location-nav .mobile-location-btn.active {
  background: var(--mobile-nav-button-background-active) !important;
  color: var(--mobile-nav-button-color-active) !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.05) !important;
}

/* Hover State Fallback */
.mobile-floor-nav .mobile-floor-btn:hover,
.mobile-location-nav .mobile-location-btn:hover {
  background: var(--interactive-secondary-hover) !important;
  transform: scale(1.1) !important;
}

/* Focus State Fallback */
.mobile-floor-nav .mobile-floor-btn:focus,
.mobile-location-nav .mobile-location-btn:focus {
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* Press State Fallback */
.mobile-floor-nav .mobile-floor-btn:active,
.mobile-location-nav .mobile-location-btn:active {
  transform: scale(0.95) !important;
  transition-duration: calc(var(--duration-fast) / 2) !important;
}

/* ============================================
 * VISIBILITY CONTROL
 * ============================================ */

/* Hide on desktop by default */
.mobile-floor-nav,
.mobile-location-nav {
  display: none !important;
}

/* Show only on mobile */
@media (max-width: 768px) {
  .mobile-floor-nav,
  .mobile-location-nav {
    display: flex !important;
  }
}

/* ============================================
 * LANDSCAPE ORIENTATION ADJUSTMENTS
 * ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
  .mobile-floor-nav,
  .mobile-location-nav {
    bottom: var(--mobile-nav-bottom-compact) !important;
    padding: calc(var(--mobile-nav-padding) * 0.75) !important;
  }
}

/* ============================================
 * ULTRA-WIDE MOBILE ADJUSTMENTS
 * ============================================ */

@media (min-width: 480px) and (max-width: 768px) {
  .mobile-floor-nav .mobile-floor-btn,
  .mobile-location-nav .mobile-location-btn {
    width: var(--mobile-nav-button-size) !important;
    height: var(--mobile-nav-button-size) !important;
  }
  
  .mobile-floor-nav,
  .mobile-location-nav {
    padding: var(--space-lg) !important;
    gap: calc(var(--mobile-nav-gap) * 1.25) !important;
  }
}

/* ============================================
 * ACCESSIBILITY ENHANCEMENTS
 * ============================================ */

/* Ensure touch targets meet minimum size requirements */
@media (pointer: coarse) {
  .mobile-floor-nav .mobile-floor-btn,
  .mobile-location-nav .mobile-location-btn {
    min-width: var(--touch-target-min) !important;
    min-height: var(--touch-target-min) !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-floor-nav,
  .mobile-location-nav {
    background: var(--color-black) !important;
    border: 2px solid var(--color-white) !important;
  }
  
  .mobile-floor-nav .mobile-floor-btn,
  .mobile-location-nav .mobile-location-btn {
    border: 1px solid var(--color-white) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mobile-floor-nav .mobile-floor-btn,
  .mobile-location-nav .mobile-location-btn {
    transition: none !important;
  }
}</pre></body></html>