/* ============================================================================= GLASS-THEME.CSS — Glassmorphism component styles Este archivo SOLO añade estilos visuales glass que los tokens no pueden expresar (backdrop-filter, body bg, gradients). Los TOKENS están en variables.css (single source of truth). Sin !important salvo donde compita con !important pre-existente en archivos legacy (documentado in-line cuando aplique). Carga al final en index.html para ganar empates de especificidad por cascade. PRINCIPIOS GLASSMORPHISM: 1. Frosted: backdrop-filter blur + tint translúcido 2. Multi-capa: blobs vivid de fondo + glass surfaces sobre ellos 3. Vivid background: contraste fuerte detrás del glass 4. Sombras profundas: doble layer drop shadow 5. Border highlight: borde sutil + inset highlight superior ESTRUCTURA: 1. Foundation universal (body, scrollbar, selección, app/main transparent) 2. Surfaces — backdrop-filter en componentes que ya consumen tokens glass 3. Componentes específicos (modal-backdrop, button variants, sidebar, fab) 4. Bottom nav + FAB (mobile) 5. Login (mobile) 6. Utilidades (.glass-surface, .glass-surface-strong) 7. Reduced motion ============================================================================= */ /* ===================================================== 0. iOS AUTO-ZOOM PREVENTION Safari iOS zoom-in al focus inputs con font-size < 16px. Fuerza 16px en touch devices para todos los inputs. ===================================================== */ @media (pointer: coarse) { /* Inputs generales: 16px previene auto-zoom iOS sin user-scalable=no. Con user-scalable=no en meta viewport el zoom está bloqueado de todos modos. Mantenemos 16px solo para inputs grandes (forms editor, login). */ input, select, textarea, .form-input, .form-select, [contenteditable="true"] { font-size: var(--text-base); /* 16px */ } /* Filtros: tamaño consistente compacto para match estandar UI */ .calendar-filters .search-input-compact input, .calendar-filters .filter-select-compact, .songs-filters .search-input-compact input, .songs-filters .filter-select-compact, .calendar-filters .filter-tab, .songs-filters .filter-tab, .calendar-filter-tabs .filter-tab, .stats-tabs .stats-tab { font-size: var(--text-xs); /* 13px */ } } /* ===================================================== 0.5 — NO-SELECT en menús y botones flotantes Long-press iOS/Android dispara selección/callout/magnifier. Bloquea selección de texto + callout en elementos interactivos. ===================================================== */ .mobile-nav, .mobile-nav-item, .mobile-nav-items, .sidebar, .sidebar-nav-item, .sidebar-nav-label, .sidebar-header, .sidebar-footer, .header, .app-header, .header-actions, .user-menu, .user-menu-trigger, .notifications-btn, .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger, .btn-success, .btn-icon, .fab-new-btn, .filter-tab, .calendar-filter-tabs, .stats-tabs, .dropdown-trigger, .dropdown-menu, .dropdown-item, .dropdown-portal, .modal-close, .toast-close, .tag-removable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* ===================================================== 1. FOUNDATION UNIVERSAL bg gradient + blobs en (fixed attachment llena viewport). body transparente para no tapar el bg del html. .app y wrappers también transparent garantiza que los blobs sean visibles a través de toda la jerarquía de containers. */ html { background-color: var(--glass-body-color); min-height: 100vh; min-height: 100dvh; color: var(--text-primary); overscroll-behavior-y: contain; } /* Layer de blobs: fixed al viewport, debajo de todo. Animado con drift sutil y desplazado por parallax via --bg-y (set por JS en App.setupParallax). */ body::before { content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background-image: var(--glass-body-bg); background-repeat: no-repeat; background-size: 130% 130%; transform: translate3d(0, var(--bg-y, 0px), 0); animation: blobDrift 14s ease-in-out infinite alternate; will-change: transform, background-position; } @keyframes blobDrift { 0% { background-position: 0% 0%; } 20% { background-position: -12% 8%; } 40% { background-position: 10% -10%; } 60% { background-position: -8% -14%; } 80% { background-position: 14% 6%; } 100% { background-position: -6% 12%; } } /* === PARTÍCULAS DE FONDO === Container fixed sobre el viewport (debajo del contenido). Partículas inyectadas por App.setupBgParticles() con posiciones+timings random. */ .bg-particles { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; } .bg-particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--particle-color, rgba(124, 77, 255, 0.35)); box-shadow: 0 0 8px var(--particle-color, rgba(124, 77, 255, 0.35)); opacity: 0; will-change: transform, opacity; animation: particleFloat var(--p-duration, 18s) ease-in-out infinite; animation-delay: var(--p-delay, 0s); } /* Light theme: partículas purple intenso para contraste sobre fondo claro */ :root:not([data-theme="dark"]) .bg-particle, [data-theme="light"] .bg-particle { --particle-color: rgba(76, 42, 133, 0.78); } /* Dark theme: partículas blanco/lavanda translúcido */ [data-theme="dark"] .bg-particle { --particle-color: rgba(196, 181, 253, 0.45); } @keyframes particleFloat { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: var(--p-opacity, 0.7); } 50% { transform: translate3d(var(--p-tx, 30px), var(--p-ty, -50px), 0); opacity: var(--p-opacity, 0.7); } 85% { opacity: var(--p-opacity, 0.7); } 100% { transform: translate3d(calc(var(--p-tx, 30px) * -0.6), calc(var(--p-ty, -50px) * 1.4), 0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } .bg-particle { animation: none; opacity: 0; } } /* Bloquear scroll del body cuando sidebar está abierto (mobile). Sidebar tiene su propio overflow-y interno; permitir touch dentro. */ html.sidebar-open, body.sidebar-open { overflow: hidden; } body.sidebar-open .sidebar.open, body.sidebar-open .sidebar.open .sidebar-nav { touch-action: pan-y; overscroll-behavior: contain; } /* Blur progresivo aplicado via JS (App.animateSidebarBlur). CSS transition en filter no interpolaba consistente en todos browsers. */ /* Garantizar que .desktop-only en filtros NO se muestre en mobile. Specificity (0,2,0) supera reglas .btn / .desktop-only base (0,1,0). */ @media (max-width: 820px) { .calendar-filters .desktop-only, .songs-filters .desktop-only, .setlists-filters .desktop-only, .calendar-controls .desktop-only { display: none; } } /* === MOBILE LAYOUT FIX (≤820px) === Problema previo: .app (flex column) + .app-content (overflow:hidden) + .main (overflow:hidden) clipaban el contenido y body no scrolleaba. Mobile-nav fixed se anclaba al viewport correctamente, pero como nada scrolleaba realmente la nav parecía estática. Fix: en mobile romper el flex+overflow:hidden para que body sea scroll container natural. Topbar sticky + mobile-nav fixed funcionan al viewport. */ @media (max-width: 820px) { .app { display: block; min-height: 100vh; min-height: 100dvh; } .app-content { display: block; overflow: visible; margin-left: 0; min-width: 0; } .main { overflow: visible; flex: none; } } body { background: transparent; color: var(--text-primary); overscroll-behavior-y: contain; } .app, .app-content, .main, main { background: transparent; overscroll-behavior-y: contain; } /* Theme dark/auto: bg-color viene del token --glass-body-color actualizado en variables.css al theme correspondiente. */ .app, .app-content, .main, main { background: transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--glass-radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--surface-5); } ::-webkit-scrollbar-track { background: transparent; } ::selection { background: rgba(167, 139, 250, 0.35); color: #fff; } /* ===================================================== 2. SURFACES — backdrop-filter en componentes Selector compuesto cubre todo surface visible que use tokens glass. ===================================================== */ .card, .panel, .stat-card, .stat-card-compact, .stats-panel, .song-card, .song-card-modern, .setlist-card, .setlist-card-past, .setlist-card-today, .setlist-card-upcoming, .minister-card, .more-section, .more-grid-item, .calendar-card, .event-card, .dashboard-card, .dashboard-stat-card, .dashboard-section, .song-list-item, .song-row, .setlist-row, .minister-row, .list-item, .row-card, .empty-state, .popover, .alert, .modal, .dropdown-menu, .dropdown-portal, .toast, .filter-tab, .calendar-filter-tabs, .stats-tabs, .search-input-compact, .filter-select-compact, .header, .app-header, .sidebar, :where(input, select, textarea) { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } /* Input dentro de wrapper no necesita su propio backdrop (wrapper ya lo aplica). Evita doble layer de blur que oscurece. */ .search-input-compact input { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Filtros: cada control es pill glass independiente. Selectores con .calendar-filters / .songs-filters prefijos igualan especificidad (0,2,0) de components.css y ganan por cascade order. */ /* === Filter row containers — layout uniforme entre páginas === Todas las filas de filtros (Songs, Setlists, Calendar) usan el mismo layout: flex row con wrap, mismo gap, misma margin. Garantiza que se vean idénticas. */ .calendar-filters, .songs-filters, .calendar-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5) 0; padding: 0; } /* Altura uniforme 36px para TODOS los wrappers de filtros (children directos). */ .calendar-filters > *, .songs-filters > *, .calendar-controls > * { height: 36px; min-height: 36px; max-height: 36px; box-sizing: border-box; flex-shrink: 0; } .search-input-compact, .filter-select-compact, .calendar-filters .search-input-compact, .calendar-filters .filter-select-compact, .songs-filters .search-input-compact, .songs-filters .filter-select-compact { background-color: var(--surface-3); border: none; border-radius: var(--glass-radius-pill); color: var(--text-primary); box-shadow: var(--glass-edge-ring), var(--glass-highlight); padding: 0 var(--space-4); backdrop-filter: blur(var(--glass-blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); transition: background-color var(--transition-base), box-shadow var(--transition-base); } /* Date filter wrappers + calendar nav compact: forma pill consistente */ .calendar-date-filter, .setlists-date-filter, .songs-date-filter, .calendar-nav-compact { background: var(--surface-3); border: none; border-radius: var(--glass-radius-pill); padding: 0 var(--space-3); color: var(--text-primary); box-shadow: var(--glass-edge-ring), var(--glass-highlight); backdrop-filter: blur(var(--glass-blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); height: 36px; align-items: center; display: inline-flex; gap: var(--space-2); } /* Input dentro del wrapper: transparente, sin radius propio, deja que el wrapper sea el visual pill */ .calendar-date-filter input[type="date"], .setlists-date-filter input[type="date"], .songs-date-filter input[type="date"] { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; height: auto; color: var(--text-primary); } .calendar-date-filter input[type="date"]:focus, .setlists-date-filter input[type="date"]:focus, .songs-date-filter input[type="date"]:focus { background: transparent; box-shadow: none; } /* Date inputs sueltos en filtros */ .calendar-filters input[type="date"], .songs-filters input[type="date"], .filter-date, input[type="date"].filter-input { background-color: var(--surface-3); border: none; border-radius: var(--glass-radius-pill); padding: 0 var(--space-4); color: var(--text-primary); box-shadow: var(--glass-edge-ring), var(--glass-highlight); backdrop-filter: blur(var(--glass-blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); } /* Selects necesitan padding-right extra por el chevron */ .filter-select-compact, .calendar-filters .filter-select-compact, .songs-filters .filter-select-compact { padding-right: var(--space-8); } /* Filter-tab pills inside .calendar-filter-tabs container — height controlado por regla unificada más abajo (.calendar-filter-tabs .filter-tab → 32px). */ .calendar-filter-tabs .filter-tab { box-sizing: border-box; display: inline-flex; align-items: center; } .search-input-compact:hover, .filter-select-compact:hover, .calendar-filters .search-input-compact:hover, .calendar-filters .filter-select-compact:hover, .songs-filters .search-input-compact:hover, .songs-filters .filter-select-compact:hover { background-color: var(--surface-4); } .search-input-compact:focus-within, .calendar-filters .search-input-compact:focus-within, .songs-filters .search-input-compact:focus-within { background-color: var(--surface-4); box-shadow: var(--glass-highlight), 0 0 0 3px rgba(167, 139, 250, 0.18); } .search-input-compact i { color: var(--text-muted); } /* Input interno: reset total. Solo aporta texto + cursor. Toda decoración (bg, borde, sombra, radius) la maneja el wrapper. `appearance: none` evita que browser dibuje su control nativo. */ .search-input-compact input { all: unset; appearance: none; -webkit-appearance: none; -moz-appearance: none; flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; outline: none; color: var(--text-primary); font-family: inherit; font-size: var(--font-size-sm); line-height: 1; } .search-input-compact input::placeholder { color: var(--text-muted); } .search-input-compact input:focus, .search-input-compact input:hover, .search-input-compact input:active { background: none; border: 0; box-shadow: none; outline: none; } /* Override autofill removido a pedido del usuario. Browser nativo dibuja autofill bg propio. */ /* Select chevron y option: legible sobre glass. Native