/* ===================================================================== RADIO LA FABULOSA — Estilos del front Estructura limpia, editorial, basada en variables de marca. ===================================================================== */ /* ============================================================ 1. VARIABLES ESTRUCTURALES ============================================================ Las variables de COLOR (--brand-*, --bs-*) se inyectan desde PHP en el del layout, leyendo los valores desde la BD (Settings → Tema). Aquí solo dejamos las variables que NO dependen de la marca. ============================================================ */ :root { --ink: #0f172a; --paper: #fffbe6; --muted: #6b7280; --line: #e5e7eb; --container: 1200px; } /* ============================================================ 1.b UTILITIES CUSTOM EDITORIALES Lo que Bootstrap NO provee: sombra 3D, titulares Oswald, pills editoriales, subrayado de marca. ============================================================ */ /* Sombra 3D editorial (offset sólido, sin blur). Combina con border-2 border-dark */ .shadow-3d { box-shadow: 4px 4px 0 var(--ink) !important; } .shadow-3d-primary { box-shadow: 4px 4px 0 var(--brand-primary) !important; } .shadow-3d-accent { box-shadow: 4px 4px 0 var(--brand-accent) !important; } .shadow-3d-lg { box-shadow: 6px 6px 0 var(--ink) !important; } .shadow-3d-lg-primary { box-shadow: 6px 6px 0 var(--brand-primary) !important; } .shadow-3d-lg-accent { box-shadow: 6px 6px 0 var(--brand-accent) !important; } /* Hover "pop" — combina con shadow-3d para efecto de presionado al revés */ .hover-pop { transition: transform .12s, box-shadow .12s; } .hover-pop:hover { transform: translate(-2px, -2px); } .hover-pop:hover.shadow-3d { box-shadow: 6px 6px 0 var(--ink) !important; } .hover-pop:hover.shadow-3d-primary { box-shadow: 6px 6px 0 var(--brand-primary) !important; } .hover-pop:hover.shadow-3d-accent { box-shadow: 6px 6px 0 var(--brand-accent) !important; } /* Titulares editoriales con tipografía display Oswald + uppercase */ .h-display, h1.h-display { font-family: 'Oswald', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; margin: 0; } .h-display-1 { font-size: clamp(2rem, 4vw, 3.2rem); } .h-display-2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } .h-display-3 { font-size: clamp(1.3rem, 2vw, 1.8rem); } /* Texto pill / etiqueta corta editorial */ .txt-pill { display: inline-block; padding: 5px 12px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .txt-pill-primary { background: var(--brand-primary); color: #fff; } .txt-pill-accent { background: var(--brand-accent); color: var(--ink); } .txt-pill-dark { background: var(--ink); color: #fff; } /* Subrayado de marca para links "ver más" */ .link-underline { border-bottom: 2px solid currentColor; padding-bottom: 2px; text-decoration: none; font-weight: 700; } /* ============================================================ 2. RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* scrollbar-gutter: stable evita que el scrollbar mueva el contenido respecto a los costados fixed */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } body.front-body { margin: 0; font-family: 'Montserrat', system-ui, -apple-system, sans-serif; font-weight: 500; background: var(--paper); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--brand-primary); text-decoration: none; transition: color .15s; } a:hover { color: var(--brand-primary-dark); } h1, h2, h3, h4, h5 { font-family: 'Oswald', 'Montserrat', sans-serif; font-weight: 700; line-height: 1.15; margin: 0 0 .5em; } p { margin: 0 0 1em; } /* ============================================================ 3. LAYOUT BASE — Bootstrap container directo, sin wrappers extra ============================================================ */ .container { max-width: var(--container) !important; } .main-content-shell { position: relative; min-height: 60vh; padding-bottom: 20px; } /* ====== PJAX loading state ====== */ /* 1) Barra de progreso animada arriba (visible mientras navega) */ body.is-pjax-loading::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-accent); z-index: 9999; animation: pjaxBar 1.2s ease-in-out infinite; transform-origin: left; } @keyframes pjaxBar { 0% { transform: scaleX(0); } 50% { transform: scaleX(.7); } 100% { transform: scaleX(1); } } /* 2) Cursor "wait" en todo el body */ body.is-pjax-loading, body.is-pjax-loading * { cursor: wait !important; } /* 3) Opacidad del contenido principal mientras carga */ .main-content-shell.is-loading>main, .main-content-shell.is-loading> :not(.main-loader) { opacity: .35; pointer-events: none; transition: opacity .15s; } /* 4) Caja del loader centrada */ .main-loader { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 251, 230, .55); z-index: 30; backdrop-filter: blur(2px); } .main-loader__box { background: #fff; border: 2px solid var(--ink); padding: 18px 26px; display: flex; align-items: center; gap: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; box-shadow: 5px 5px 0 var(--brand-primary); } .main-loader__spinner { width: 22px; height: 22px; border-width: 3px; color: var(--brand-primary) !important; } /* Banners laterales — anclados al 50% con offset (se ocultan solos cuando no hay espacio). No usan media queries: cuando la pantalla es < 1200px de ancho los banners se salen naturalmente fuera del viewport. */ .costados { display: block; } .btFullHeightBannerLeft, .btFullHeightBannerRight { position: fixed; top: 0; width: 600px; height: 100vh; z-index: 6; overflow: hidden; background: #ffffff; } .btFullHeightBannerLeft { left: 50%; margin-left: -1200px; text-align: right; } .btFullHeightBannerRight { right: 50%; margin-right: -1200px; text-align: left; } .btFullHeightBannerLeft a, .btFullHeightBannerRight a, .btFullHeightBannerLeft img, .btFullHeightBannerRight img { display: block; width: 100%; height: 100%; } .btFullHeightBannerLeft img, .btFullHeightBannerRight img { object-fit: cover; } /* ============================================================ 4. HEADER — usa Bootstrap utilities (bg-primary, py-4, etc.) Aquí solo va lo que Bootstrap no provee: tamaños, fuentes, colores específicos. ============================================================ */ /* Logo */ .topbar-logo img { height: 56px; width: auto; display: block; } /* Reloj + AL AIRE — centrar el contenido del col en horizontal con flex */ .header-status { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; color: #fff; } .topbar-clock { display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .topbar-clock__time { font-family: 'Oswald', sans-serif; font-size: 1.7rem; font-weight: 700; color: #fff; } .topbar-clock__meta { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .75); font-weight: 600; } .topbar-air { display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, .18); padding: 8px 14px; max-width: 460px; /* limita ancho — el resto se hace marquee */ min-width: 0; } .topbar-pill { background: var(--brand-accent); color: var(--ink); padding: 4px 10px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; flex-shrink: 0; } .topbar-air strong { color: #fff; font-size: .92rem; font-weight: 700; white-space: nowrap; } /* Marquee — solo se activa cuando JS añade .is-overflow al detectar texto desbordado */ .topbar-air .marquee { flex: 1; min-width: 0; overflow: hidden; } .topbar-air .marquee strong { display: inline-block; } .topbar-air .marquee.is-overflow strong { padding-left: 100%; animation: marquee-scroll 18s linear infinite; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Pause al hover por accesibilidad */ .topbar-air .marquee:hover strong { animation-play-state: paused; } /* Nav band */ .nav-band { background: var(--brand-primary-dark); } .desktop-nav { display: flex; gap: 4px; padding: 6px 0; flex-wrap: wrap; } .desktop-nav__link { color: rgba(255, 255, 255, .85); font-size: .92rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 10px 18px; text-decoration: none; transition: all .15s; } .desktop-nav__link:hover { background: rgba(255, 255, 255, .12); color: #fff; } .desktop-nav__link.active { background: var(--brand-accent); color: var(--ink); } .mobile-nav__toggle { background: var(--brand-accent); color: var(--ink); border: 0; padding: 12px 18px; font-weight: 800; text-transform: uppercase; display: flex; align-items: center; gap: 8px; cursor: pointer; width: 100%; justify-content: center; } .mobile-menu-links { display: flex; flex-direction: column; } .mobile-menu-links a { color: var(--ink); padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 700; text-transform: uppercase; font-size: .9rem; text-decoration: none; } .mobile-menu-links a.active { color: var(--brand-primary); } /* Hero slider — Bootstrap nativo (carousel + carousel-item + d-block + w-100) */ /* ============================================================ 5. FOOTER ============================================================ */ /* Footer — el container interno respeta el max-width */ .site-footer { background: var(--ink); color: #cbd5e1; border-top: 4px solid var(--brand-accent); } .site-footer .footer-logo { height: 46px; width: auto; } .site-footer h5 { color: #fff; font-family: 'Oswald', sans-serif; } /* ============================================================ 6. FLOATING PLAYER — compacto, editorial (sin redondeces) ============================================================ */ .floating-player { position: fixed; left: 0; right: 0; bottom: 0; background: var(--ink); color: #fff; border-top: 3px solid var(--brand-accent); z-index: 100; } /* Si está minimizado, ocultamos la barra completa y dejamos visible solo el botón mini */ .floating-player.is-minimized .radio-dock { display: none; } .floating-player.is-minimized { background: transparent; border-top: 0; pointer-events: none; } .floating-player.is-minimized .radio-dock__mini { pointer-events: auto; } /* Barra principal */ .radio-dock { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px; gap: 14px; max-width: var(--container); margin: 0 auto; } .radio-dock__brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } /* Thumb con botón play flotante en esquina inferior-derecha */ .radio-dock__logo-stack { position: relative; flex-shrink: 0; } .radio-dock__logo { width: 46px; height: 46px; object-fit: cover; display: block; border: 1px solid rgba(255, 255, 255, .15); } .radio-dock__play { position: absolute !important; bottom: -4px; right: -4px; width: 24px !important; height: 24px !important; background: var(--brand-accent) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; display: grid !important; place-items: center; font-size: .85rem; padding: 0 !important; cursor: pointer; } .radio-dock__play:hover { background: #fff !important; } .radio-dock__copy { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .radio-dock__eyebrow { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-accent); font-weight: 800; margin-bottom: 2px; } .radio-dock__title { font-size: .88rem; color: #fff; font-weight: 700; white-space: nowrap; display: inline-block; } /* Marquee del player — el wrap limita el ancho y JS añade .is-overflow si es necesario */ .radio-dock__copy .marquee { overflow: hidden; max-width: 320px; } .radio-dock__copy .marquee.is-overflow .radio-dock__title { padding-left: 100%; animation: marquee-scroll 18s linear infinite; } .radio-dock__copy .marquee:hover .radio-dock__title { animation-play-state: paused; } /* En móvil el max-width es menor (más probable que desborde y se haga marquee) */ @media (max-width: 600px) { .radio-dock__copy .marquee { max-width: 200px; } } .radio-dock__toolbar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .radio-dock__socials { display: flex; gap: 4px; } .radio-dock__socials a { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .18); display: grid; place-items: center; color: #fff; font-size: .9rem; border-radius: 0; text-decoration: none; } .radio-dock__socials a:hover { background: var(--brand-accent); color: var(--ink); border-color: var(--brand-accent); } .radio-dock__volume { width: 32px !important; height: 32px !important; background: var(--brand-accent) !important; color: var(--ink) !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: .9rem; display: grid !important; place-items: center; } /* Botón minimizar (sobresale arriba a la derecha) */ .radio-dock__minimize { position: absolute !important; top: -28px; right: 18px; width: 28px !important; height: 28px !important; border: 0 !important; border-radius: 0 !important; background: var(--ink) !important; color: #fff !important; border-top: 3px solid var(--brand-accent) !important; padding: 0 !important; display: grid !important; place-items: center; font-size: .8rem; } /* Botón flotante cuando está minimizado (compacto, esquina) */ .radio-dock__mini[hidden] { display: none !important; } .radio-dock__mini { position: fixed !important; bottom: 14px; right: 14px; display: flex !important; align-items: center; gap: 8px; padding: 6px 8px 6px 6px !important; border: 2px solid var(--ink) !important; background: var(--brand-accent) !important; color: var(--ink) !important; border-radius: 0 !important; box-shadow: 3px 3px 0 var(--ink); z-index: 110; cursor: pointer; } .radio-dock__mini-logo { width: 28px; height: 28px; object-fit: cover; display: block; } .radio-dock__mini-state { display: grid; place-items: center; font-size: 1rem; } .radio-dock__volume-pop { position: absolute; right: 18px; bottom: 60px; background: #fff; color: var(--ink); padding: 10px 14px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--brand-accent); display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; } .radio-dock__volume-pop input[type=range] { width: 120px; } /* ============================================================ 7. COMPONENTES COMUNES ============================================================ */ /* Pills editoriales — usan SOLO los 2 colores de marca (primary/accent) */ .section-ribbon, .home-pill { display: inline-block; background: var(--brand-primary); /* default = azul de marca */ color: #fff; padding: 5px 12px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; } .section-ribbon--blue, .home-pill--blue { background: var(--brand-primary); color: #fff; } .section-ribbon--accent, .home-pill--accent { background: var(--brand-accent); color: var(--ink); } .section-ribbon--dark, .home-pill--dark { background: var(--ink); color: #fff; } .eyebrow { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-primary); margin-bottom: 8px; display: block; } .tag { display: inline-block; background: var(--ink); color: #fff; padding: 4px 10px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } /* Botones editoriales */ .home-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; border: 2px solid var(--ink); text-decoration: none; cursor: pointer; transition: all .12s; background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); } .home-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); } .home-btn--accent { background: var(--brand-accent); } .home-btn--ghost { background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); box-shadow: 4px 4px 0 var(--brand-primary); } .home-btn--ghost:hover { color: var(--brand-primary-dark); box-shadow: 6px 6px 0 var(--brand-primary); } /* Bootstrap overrides */ .btn-outline-primary, .btn.btn-outline-primary { background: transparent !important; color: var(--brand-primary) !important; border: 2px solid var(--brand-primary) !important; font-weight: 700 !important; } .btn-outline-primary:hover { background: var(--brand-primary) !important; color: #fff !important; } .btn-primary, .btn.btn-primary { background: var(--brand-primary) !important; border: 2px solid var(--brand-primary) !important; color: #fff !important; font-weight: 700 !important; } .btn.rounded-0 { border-radius: 0 !important; } /* Section header común */ .home-section { margin: 48px 0; } /* Variant: panel oscuro con padding (rompe la monotonía del crema) */ .home-section--panel-dark { background: var(--ink); color: #fff; padding: 40px 32px; border: 2px solid var(--ink); margin-left: -16px; margin-right: -16px; /* sangra al borde del container */ } .home-section--panel-dark .home-section__head h2 { color: #fff; } .home-section--panel-dark .schedule-item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .15); color: #fff; } .home-section--panel-dark .schedule-item:hover { box-shadow: 4px 4px 0 var(--brand-accent); } .home-section--panel-dark .schedule-item__time { background: var(--brand-accent); color: var(--ink); } .home-section--panel-dark .schedule-item__body h3 { color: #fff; } .home-section--panel-dark .schedule-item__body p { color: rgba(255, 255, 255, .65); } /* Variant: panel claro con borde marcado */ .home-section--panel-light { background: #fff; padding: 32px 28px; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--brand-primary); } .home-section__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .home-section__head h2 { font-size: 1.7rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: -.01em; } .home-link { color: var(--brand-primary); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; border-bottom: 2px solid var(--brand-primary); padding-bottom: 2px; } .home-link:hover { color: var(--brand-primary-dark); border-color: var(--brand-primary-dark); } /* Versión inversa (sobre fondos oscuros) */ .home-link--inverse { color: var(--brand-accent); border-color: var(--brand-accent); } .home-link--inverse:hover { color: #fff; border-color: #fff; } .empty-copy { text-align: center; padding: 40px 20px; color: var(--muted); } .admin-alert { padding: 12px 16px; border: 2px solid var(--brand-primary); background: var(--brand-primary-soft); margin-bottom: 16px; } .admin-alert-success { border-color: #16a34a; background: #dcfce7; color: #14532d; } /* ============================================================ 8. RESPONSIVE — solo lo que Bootstrap no resuelve solo ============================================================ */ @media (max-width: 991px) { .desktop-nav { display: none !important; } .header-status { gap: 14px; justify-content: center; } .topbar-clock__time { font-size: 1.4rem; } .topbar-air { max-width: 100%; } } @media (max-width: 600px) { .radio-dock { padding: 10px 14px; } .radio-dock__socials { display: none !important; } .radio-dock__title { font-size: .85rem; } .site-footer { padding: 24px 18px; flex-direction: column; text-align: center; } } /* Utility para el grid con `place-items-center` (Bootstrap no lo trae como utility) */ .place-items-center { place-items: center; } /* ============================================================ LIGHTBOX (galería) — modal Bootstrap simplificado tipo viejo ============================================================ */ .lightbox-modal { background: rgba(0, 0, 0, .96); z-index: 9999 !important; } .lightbox-modal + .modal-backdrop, .modal-backdrop.show { z-index: 9998 !important; } .lightbox-modal .modal-content { cursor: zoom-out; } .lightbox-img { max-width: 92vw; max-height: 90vh; object-fit: contain; display: block; cursor: default; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .lightbox-close { position: fixed; top: 18px; right: 24px; z-index: 10; width: 56px; height: 56px; background: transparent; color: #fff; border: 2px solid #fff; font-size: 1.6rem; display: grid; place-items: center; cursor: pointer; transition: all .15s; } .lightbox-close:hover { background: #fff; color: #000; transform: rotate(90deg); }