.hidden { display: none !important; }
body { -webkit-font-smoothing: antialiased; }
html, body { height: 100%; }
body { overflow: hidden; }
#app-interface { height: 100dvh; width: 100%; }
#reefMap { width: 100%; height: 100%; background: #e5e7eb; z-index: 0; }

/* A11Y Global Focus */
*:focus-visible { outline: 2px solid #00C4CC; outline-offset: 2px; }

.toggle-checkbox:checked { right: 0; border-color: #00C4CC; }
.toggle-checkbox:checked + .toggle-label { background-color: #00C4CC; }

#modal-content { max-height: 100vh; }
.scroll-area { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#main-nav { padding-bottom: env(safe-area-inset-bottom); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.active-filter-btn {
    background-color: #071C9C!important;
    color: white !important;
    border-color: #071C9C!important;
    box-shadow: 0 4px 6px -1px rgba(0, 196, 204, 0.3);
}

.metro-track { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #E5E7EB; z-index: 0; transform: translateY(-50%); }

.station-clean { background: white; border: 1px solid #E5E7EB; transition: all 0.3s ease; position: relative; overflow: hidden; }
.station-clean:active { transform: scale(0.95); }

.station-info-pill {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.92); border: 1px solid rgba(7,28,156,0.15); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,0.06); z-index: 20;
}
.station-info-pill i { color: #071C9C; font-size: 18px; }

.station-rombo {
    width: 40px; height: 40px; background: white; border: 3px solid #071C9C; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.station-rombo i { transform: rotate(-45deg); color: #071C9C; font-size: 1.2rem; }

.station-active-card { background: white; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); position: relative; overflow: hidden; }
.station-active-card .station-rombo { background: #00C4CC; border-color: white; }
.station-active-card .station-rombo i { color: white; }

.map-widget-content { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; max-height: 500px; opacity: 1; overflow: hidden; }
.map-widget-content.collapsed { max-height: 0; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; visibility: hidden; }



/* --- SPRINT 1 UPDATES --- */

/* Safe areas para evitar superposición con OS en móviles */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* Control para evitar scroll de fondo cuando el modal está abierto (Épica 7.1) */
body.modal-open {
    overflow: hidden;
    touch-action: none;
}



.selector-desktop-force { display: block !important; }
@media (max-width: 768px) { .selector-desktop-force { display: none !important; } }

@media (min-width: 768px) {
  #main-nav { position: fixed; left: 0; top: 0; height: 100%; z-index: 50; transition: width 280ms ease; overflow: hidden; }
  #main-nav.is-collapsed { width: 64px; }
  #main-nav.is-expanded  { width: 160px; }
  #main-nav.is-collapsed .nav-label { display: none; }
  #main-nav.is-collapsed .nav-btn { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; }
  #app-interface.has-sidebar-collapsed main { margin-left: 64px; }
  #app-interface.has-sidebar-expanded  main { margin-left: 160px; }
   #modal-content {
        height: auto;
    }
}
@media (max-width: 767px) { #app-interface main { margin-left: 0 !important; } }