/* ===================================================================== MUMVI - Hoja de estilos principal Modo oscuro: fondo negro, tarjetas gris muy oscuro, texto blanco, botones turquesa. Tipografia Geist. Iconos Iconoir 18px. Incluye el efecto "liquid glass" (cristal liquido) con blur. ===================================================================== */ /* La fuente Geist se carga via en el (Google Fonts) para no bloquear el parseo de esta hoja. Ver layouts/base.twig y layouts/admin.twig. */ :root { /* Paleta modo oscuro */ --bg: #000000; /* Fondo: negro */ --bg-soft: #05070b; --card: #0d1015; /* Tarjetas: gris muy oscuro */ --card-soft: #11151c; --card-hover: #161b23; --text: #ffffff; /* Texto: blanco */ --text-muted: #a6adba; --text-dim: #6b7280; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); /* Marca: turquesa (botones) */ --brand: #20E3B2; --brand-strong: #14c79a; --brand-soft: rgba(32, 227, 178, 0.12); --brand-glow: rgba(32, 227, 178, 0.35); /* Acentos para deportes de combate */ --accent-violet: #7c5cff; --accent-blue: #4f8cff; /* Tipografia */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Radios */ --radius: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; /* body 14px */ line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } p, li, span, td, label, input, textarea, select, button { font-size: 14px; } .text-body-16 { font-size: 16px; } /* body 16px (regular & medium) */ h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .title, h3, h4 { font-size: 18px; } /* titulo 18px */ a { color: inherit; text-decoration: none; } /* ---------- Iconos Iconoir: 18px, stroke 1.5, bound 24px ---------- */ .mumvi-icon, [class^="iconoir-"], [class*=" iconoir-"] { font-size: 18px; --iconoir-stroke-width: 1.5px; stroke-width: 1.5px; vertical-align: middle; } /* ---------- Logo MUMVI ---------- El logo original es contorno negro con punto teal. Sobre fondo oscuro lo mostramos en BLANCO conservando el punto turquesa (sin volverlo rosa): invert pasa negro->blanco y teal->rosa; hue-rotate devuelve el rosa a teal. El blanco (acromatico) no se ve afectado por hue-rotate. */ /* ===================================================================== LIQUID GLASS (cristal liquido) - exactamente segun especificacion ===================================================================== */ .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; border-radius: var(--radius-lg); } .liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .liquid-glass-strong { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; border-radius: var(--radius-lg); } .liquid-glass-strong::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ===================================================================== Componentes ===================================================================== */ /* Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-brand { background: var(--brand); color: #00150f; box-shadow: 0 8px 24px -8px var(--brand-glow); } .btn-brand:hover { background: var(--brand-strong); box-shadow: 0 10px 30px -8px var(--brand-glow); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .btn-dark { background: var(--card-soft); color: var(--text); border-color: var(--border); } .btn-dark:hover { background: var(--card-hover); } .btn-block { width: 100%; } .btn-sm { padding: 0.45rem 0.9rem; font-size: 13px; } /* Tarjetas */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .card:hover { border-color: var(--border-strong); } /* Pills / badges */ .pill { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } .badge-brand { background: var(--brand-soft); color: var(--brand); border: 1px solid rgba(32,227,178,0.25); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 11px; font-weight: 600; } /* Section tag (flecha + texto uppercase tracking) */ .section-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); } /* Inputs */ .input, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { width: 100%; background: var(--card-soft); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 0.7rem 0.95rem; font-family: inherit; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .label { display:block; font-size: 13px; color: var(--text-muted); margin-bottom: 0.4rem; } /* Checkboxes y radios */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: 0 0 auto; margin: 0; padding: 0; vertical-align: middle; background: var(--card-soft); border: 1.5px solid var(--border-strong); border-radius: 5px; cursor: pointer; position: relative; transition: background 0.15s ease, border-color 0.15s ease; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--brand); } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--brand); border-color: var(--brand); } input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #04121012; border-width: 0 2px 2px 0; border-color: #03110f; transform: rotate(45deg); } input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #03110f; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); } /* Glow orbs decorativos */ .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; z-index: 0; } .orb-brand { background: radial-gradient(circle, var(--brand-glow), transparent 70%); } .orb-violet { background: radial-gradient(circle, rgba(124,92,255,0.35), transparent 70%); } /* Hero video overlays */ .hero-fade-top { background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%); } .hero-fade-bottom { background: linear-gradient(to top, var(--bg) 5%, rgba(0,0,0,0.2) 60%, transparent 100%); } /* Marquee */ .marquee-track { display: flex; gap: 4rem; width: max-content; animation: marquee 28s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.25,1,0.5,1), transform 0.7s cubic-bezier(0.25,1,0.5,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Placeholder de marca para imagenes de noticias aun no subidas */ .news-fallback { background: linear-gradient(135deg, var(--card-soft) 0%, #000 100%); position: relative; } .news-fallback::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 15%, rgba(32,227,178,0.16), transparent 55%); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #1c222c; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #2a3340; } /* Flash toasts */ .toast { animation: toastIn 0.4s cubic-bezier(0.25,1,0.5,1); } @keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Event card image hover */ .event-card img { transition: transform 0.6s cubic-bezier(0.25,1,0.5,1); } .event-card:hover img { transform: scale(1.06); } /* Admin sidebar active */ .admin-link.active { background: var(--brand-soft); color: var(--brand); border-color: rgba(32,227,178,0.25); } /* Hide Google Translate UI */ .goog-te-banner-frame, .goog-te-gadget, #google_translate_element, .skiptranslate { display: none !important; } body { top: 0 !important; } .goog-te-spinner-pos { display: none !important; } /* Utility */ .gradient-text { background: linear-gradient(90deg, #fff, var(--brand)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .divider { height: 1px; background: var(--border); border: 0; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ===================================================================== SENSACION DE APP NATIVA EN MOVIL (PWA: iOS / Android) ===================================================================== */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Sin resaltado azul al tocar y sin seleccion accidental en controles */ a, button, .btn, nav, .mobile-tabbar { -webkit-tap-highlight-color: transparent; } .mobile-tabbar, nav { -webkit-user-select: none; user-select: none; } /* Scroll con inercia tipo nativo */ body { -webkit-overflow-scrolling: touch; } /* Respeta el notch / barra inferior en iOS */ .safe-bottom { padding-bottom: var(--safe-bottom); } .safe-top { padding-top: var(--safe-top); } /* Barra de pestanas inferior (estilo app nativa) */ .mobile-tabbar { height: calc(58px + var(--safe-bottom)); padding-bottom: var(--safe-bottom); } .mobile-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; letter-spacing: 0.01em; flex: 1 1 0; min-width: 0; padding: 0.3rem 0.1rem; color: var(--text-dim); transition: color 0.2s ease, transform 0.15s ease; } .mobile-tabbar a span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; } .mobile-tabbar a i { font-size: 21px; line-height: 1; } .mobile-tabbar a.active { color: var(--brand); } .mobile-tabbar a:active { transform: scale(0.92); } /* La celda del FAB no lleva texto ni flex-grow: solo centra el boton */ .mobile-tabbar a.tab-fab-cell { flex: 0 0 auto; padding: 0; } /* Boton flotante central (compra rapida) tipo app */ .tab-fab { width: 54px; height: 54px; border-radius: 50%; background: var(--brand); color: #00150f; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -6px var(--brand-glow); margin-top: -26px; border: 4px solid #05070b; } .tab-fab i { font-size: 26px; } /* ===================================================================== MENU HAMBURGUESA ANIMADO (SVG) + DRAWER FULL-WIDTH (liquid glass) ===================================================================== */ /* Boton hamburguesa: 3 lineas SVG que se transforman en X */ .hamburger { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .hamburger:hover { background: rgba(255,255,255,0.05); border-color: var(--border); } .hamburger:active { transform: scale(0.94); } .hamburger svg { width: 26px; height: 26px; overflow: visible; } .hamburger svg line { transition: transform 0.4s cubic-bezier(0.65,0,0.35,1), opacity 0.25s ease; transform-box: fill-box; transform-origin: center; } .hamburger .hb-top { transform: translateY(-5px); } .hamburger .hb-bot { transform: translateY(5px); } .hamburger.is-open { color: var(--brand); } .hamburger.is-open .hb-top { transform: translateY(0) rotate(45deg); } .hamburger.is-open .hb-mid { opacity: 0; transform: scaleX(0.2); } .hamburger.is-open .hb-bot { transform: translateY(0) rotate(-45deg); } /* Drawer full-screen (estilo app nativa, fondo cristal liquido) */ .app-drawer { position: fixed; inset: 0; z-index: 80; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } .app-drawer.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s; } .app-drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* Panel cristalino: blur fuerte detras + borde gradiente (liquid glass) */ .app-drawer-panel { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: calc(1rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom)); background: rgba(5,7,11,0.72); background-blend-mode: luminosity; -webkit-backdrop-filter: blur(34px) saturate(1.4); backdrop-filter: blur(34px) saturate(1.4); box-shadow: inset 0 1px 1px rgba(255,255,255,0.12); overflow-y: auto; transform: translateY(-14px) scale(0.985); opacity: 0; transition: transform 0.4s cubic-bezier(0.25,1,0.5,1), opacity 0.35s ease; } .app-drawer.is-open .app-drawer-panel { transform: translateY(0) scale(1); opacity: 1; } /* Decoracion de marca dentro del drawer */ .app-drawer-panel .drawer-orb { position: absolute; width: 360px; height: 360px; top: -120px; right: -120px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, var(--brand-glow), transparent 70%); filter: blur(70px); opacity: 0.35; } .drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; position: relative; z-index: 1; } /* Tarjeta de cuenta (avatar + saldo) dentro del drawer */ .drawer-account { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; margin-bottom: 1.1rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid var(--border); } /* Seccion de links del drawer (etiqueta + items) */ .drawer-section-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin: 1rem 0.35rem 0.5rem; position: relative; z-index: 1; } .drawer-link { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.95rem; padding: 0.95rem 1rem; border-radius: var(--radius); color: var(--text-muted); border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .drawer-link i:first-child { font-size: 22px; } .drawer-link .drawer-link-arrow { margin-left: auto; color: var(--text-dim); font-size: 16px; } .drawer-link:hover, .drawer-link:active { background: rgba(255,255,255,0.05); color: var(--text); } .drawer-link.active { background: var(--brand-soft); color: var(--brand); border-color: rgba(32,227,178,0.25); } /* Entrada escalonada de los items (sensacion nativa) */ .app-drawer .drawer-stagger > * { opacity: 0; transform: translateY(12px); } .app-drawer.is-open .drawer-stagger > * { animation: drawer-in 0.5s cubic-bezier(0.25,1,0.5,1) forwards; } .app-drawer.is-open .drawer-stagger > *:nth-child(1) { animation-delay: 0.06s; } .app-drawer.is-open .drawer-stagger > *:nth-child(2) { animation-delay: 0.10s; } .app-drawer.is-open .drawer-stagger > *:nth-child(3) { animation-delay: 0.14s; } .app-drawer.is-open .drawer-stagger > *:nth-child(4) { animation-delay: 0.18s; } .app-drawer.is-open .drawer-stagger > *:nth-child(5) { animation-delay: 0.22s; } .app-drawer.is-open .drawer-stagger > *:nth-child(6) { animation-delay: 0.26s; } .app-drawer.is-open .drawer-stagger > *:nth-child(7) { animation-delay: 0.30s; } .app-drawer.is-open .drawer-stagger > *:nth-child(8) { animation-delay: 0.34s; } .app-drawer.is-open .drawer-stagger > *:nth-child(9) { animation-delay: 0.38s; } .app-drawer.is-open .drawer-stagger > *:nth-child(10) { animation-delay: 0.42s; } .app-drawer.is-open .drawer-stagger > *:nth-child(11) { animation-delay: 0.46s; } .app-drawer.is-open .drawer-stagger > *:nth-child(12) { animation-delay: 0.50s; } @keyframes drawer-in { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .app-drawer-panel, .hamburger svg line, .app-drawer .drawer-stagger > * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } } /* ===================================================================== FOUNDERS CLUB (dashboard) - estilo screenshot ===================================================================== */ /* Boton cristalino (How it works) */ .btn-glass { background: rgba(255,255,255,0.07); color: var(--text); border-color: var(--border-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-glass:hover { background: rgba(255,255,255,0.12); border-color: var(--brand); } /* Hero del Founders Club con corona de fondo a la derecha */ .founders-hero { position: relative; overflow: hidden; z-index: 1; /* por encima del .dash-hero (bg-dash) del layout */ border-radius: var(--radius-xl); border: 1px solid var(--border); min-height: 320px; display: flex; align-items: center; padding: 2.25rem; background: #05070b; } .founders-hero-img { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; height: 100%; width: auto; max-width: none; object-fit: cover; object-position: center right; } .founders-hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #05070b 0%, #05070b 14%, rgba(5,7,11,0.80) 34%, rgba(5,7,11,0.20) 56%, rgba(5,7,11,0) 70%); } /* Badge de icono para los stats del resumen */ .fstat-badge { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: 0.7rem; } .fstat-badge i { font-size: 20px; } /* Barra de disponibilidad segmentada (estilo screenshot) */ .seg-bar { display: flex; gap: 3px; } .seg { flex: 1 1 0; height: 11px; border-radius: 2px; background: rgba(255,255,255,0.08); transition: background 0.3s ease; } .seg.on { background: var(--brand); box-shadow: 0 0 6px var(--brand-glow); } /* Tarjetas inferiores con imagen decorativa a la derecha */ .founders-row { position: relative; overflow: hidden; min-height: 138px; } .founders-row-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: 0; background-size: cover; background-position: center right; } .founders-row-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--card) 0%, rgba(13,16,21,0.85) 30%, rgba(13,16,21,0.35) 70%, rgba(13,16,21,0) 100%); } .founders-row > *:not(.founders-row-bg) { position: relative; z-index: 1; } /* Chevron decorativo a la derecha */ .founders-row-chevron { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-muted); pointer-events: none; } /* ===================================================================== TARJETAS DE FORMULARIO (Profile y similares) ===================================================================== */ /* Encabezado de tarjeta con badge de icono */ .card-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.6rem; } .card-head-ic { width: 46px; height: 46px; border-radius: 13px; flex: none; background: rgba(0, 224, 198, 0.08); border: 1px solid rgba(0, 224, 198, 0.18); display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 22px; } .card-head h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.2; } .card-head p { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } /* Campo de formulario con icono a la izquierda */ .field { position: relative; } .field > .field-ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 18px; display: flex; align-items: center; z-index: 1; } .field input, .field select { padding: 0.95rem 1rem 0.95rem 2.85rem; border-radius: var(--radius); } .field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; } .field .field-caret { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 18px; display: flex; } .field .pw-toggle { right: 0.95rem; } .field input.pr-11 { padding-right: 2.85rem; } .field input:focus ~ .field-ic, .field select:focus ~ .field-ic { color: var(--brand); } /* Botones con espaciado mayor para estas tarjetas */ .card-form .btn { padding-top: 0.8rem; padding-bottom: 0.8rem; } /* ===================================================================== SUBIDA DE IMAGENES (drag & drop con vista previa) ===================================================================== */ .img-uploader { position: relative; } .img-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; min-height: 168px; padding: 1.25rem; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--card-soft); color: var(--text-muted); cursor: pointer; overflow: hidden; transition: border-color 0.2s ease, background 0.2s ease; } .img-dropzone:hover { border-color: var(--brand); background: var(--card-hover); } .img-uploader.is-dragover .img-dropzone { border-color: var(--brand); background: rgba(32,227,178,0.08); } .img-dropzone .iz-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(32,227,178,0.08); border:1px solid rgba(32,227,178,0.18); display:flex; align-items:center; justify-content:center; color: var(--brand); font-size: 22px; } .img-dropzone .iz-title { font-size: 0.9rem; color: var(--text); font-weight: 500; } .img-dropzone .iz-title b { color: var(--brand); font-weight: 600; } .img-dropzone .iz-hint { font-size: 0.72rem; color: var(--text-dim); } /* Estado con imagen */ .img-uploader.has-image .img-dropzone { padding: 0; border-style: solid; border-color: var(--border); min-height: 168px; } .img-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .img-uploader.has-image .img-preview { display: block; } .img-uploader.has-image .iz-empty { display: none; } .img-overlay { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: space-between; padding: 0.6rem; gap: 0.4rem; z-index: 2; background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 55%); } .img-uploader.has-image .img-overlay { display: flex; } .img-overlay .iz-path { font-size: 0.68rem; color: rgba(255,255,255,0.7); word-break: break-all; align-self: flex-end; } .img-overlay .iz-actions { display: flex; gap: 0.35rem; flex: none; } .img-overlay button { width: 32px; height: 32px; border-radius: 9px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); color:#fff; font-size: 15px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.15s ease; } .img-overlay button:hover { background: rgba(0,0,0,0.8); border-color: var(--brand); color: var(--brand); } /* Progreso */ .img-progress { position: absolute; left:0; right:0; bottom:0; height: 4px; background: rgba(255,255,255,0.08); z-index: 3; display: none; } .img-uploader.is-uploading .img-progress { display: block; } .img-progress span { display:block; height:100%; width:0; background: var(--brand); transition: width 0.2s ease; } .img-uploader.is-uploading .img-dropzone { opacity: 0.7; } .img-error { color: #ff8a94; font-size: 0.72rem; margin-top: 0.4rem; display: none; } .img-uploader.has-error .img-error { display: block; } /* ===================================================================== EDITOR DE TEXTO ENRIQUECIDO (rich text) ===================================================================== */ .rt-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-soft); overflow: hidden; } .rt-wrap.is-focused { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .rt-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); } .rt-toolbar button { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--text-muted); background: transparent; border: 1px solid transparent; font-size: 15px; cursor: pointer; transition: all 0.15s ease; } .rt-toolbar button:hover { color: var(--text); background: rgba(255,255,255,0.06); } .rt-toolbar button.is-active { color: var(--brand); background: rgba(32,227,178,0.1); border-color: rgba(32,227,178,0.2); } .rt-toolbar .rt-sep { width: 1px; align-self: stretch; background: var(--border); margin: 4px 4px; } .rt-editor { min-height: 180px; max-height: 460px; overflow-y: auto; padding: 0.9rem 1rem; color: var(--text); font-family: inherit; font-size: 0.95rem; line-height: 1.6; outline: none; } .rt-editor:empty::before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; } .rt-editor h1, .rt-editor h2 { font-size: 1.3rem; font-weight: 600; margin: 0.6em 0 0.3em; } .rt-editor h3 { font-size: 1.1rem; font-weight: 600; margin: 0.6em 0 0.3em; } .rt-editor p { margin: 0 0 0.7em; } .rt-editor ul, .rt-editor ol { margin: 0 0 0.7em; padding-left: 1.5em; } .rt-editor ul { list-style: disc; } .rt-editor ol { list-style: decimal; } .rt-editor a { color: var(--brand); text-decoration: underline; } .rt-editor blockquote { border-left: 3px solid var(--brand); margin: 0 0 0.7em; padding: 0.2em 0 0.2em 1em; color: var(--text-muted); } .rt-editor strong, .rt-editor b { font-weight: 700; } /* Render del contenido enriquecido en el lado publico */ .prose-rt h2 { font-size: 1.5rem; font-weight: 600; margin: 1.2em 0 0.4em; } .prose-rt h3 { font-size: 1.2rem; font-weight: 600; margin: 1em 0 0.4em; } .prose-rt p { margin: 0 0 1em; line-height: 1.75; } .prose-rt ul, .prose-rt ol { margin: 0 0 1em; padding-left: 1.5em; } .prose-rt ul { list-style: disc; } .prose-rt ol { list-style: decimal; } .prose-rt li { margin: 0.25em 0; } .prose-rt a { color: var(--brand); text-decoration: underline; } .prose-rt strong, .prose-rt b { font-weight: 700; } .prose-rt blockquote { border-left: 3px solid var(--brand); padding-left: 1em; margin: 0 0 1em; color: var(--text-muted); } /* En modo standalone (app instalada) ocultar elementos solo-web si se requiere */ @media (display-mode: standalone) { .hide-in-app { display: none !important; } body { overscroll-behavior-y: none; } } /* Animaciones SVG ilustradas (guia "como funciona") */ @keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes dash-move { to { stroke-dashoffset: -1000; } } @keyframes draw-in { to { stroke-dashoffset: 0; } } @keyframes pulse-soft { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.96); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes scan-y { 0%,100% { transform: translateY(-34px); } 50% { transform: translateY(34px); } } @keyframes coin-pop { 0% { transform: translateY(8px) scale(0.6); opacity: 0; } 60% { transform: translateY(-4px) scale(1.05); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .svg-float { animation: float-y 4s ease-in-out infinite; transform-origin: center; } .svg-pulse { animation: pulse-soft 2.6s ease-in-out infinite; transform-origin: center; } .svg-spin { animation: spin-slow 16s linear infinite; transform-origin: center; } .svg-scan { animation: scan-y 2.4s ease-in-out infinite; } .svg-flow { stroke-dasharray: 8 8; animation: dash-move 18s linear infinite; } .svg-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-in 2.4s ease forwards; } .svg-coin { animation: coin-pop 0.9s ease forwards; transform-origin: center; } @media (prefers-reduced-motion: reduce) { .svg-float, .svg-pulse, .svg-spin, .svg-scan, .svg-flow, .svg-draw, .svg-coin, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } } /* Checklist de onboarding */ .checklist-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); } .checklist-item:last-child { border-bottom: 0; } .checklist-badge { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--border-strong); color: var(--text-dim); } .checklist-item.done .checklist-badge { background: var(--brand); border-color: var(--brand); color: #00150f; } .checklist-item.done .checklist-title { color: var(--text-muted); text-decoration: line-through; } .progress-track { height: 3px; background: var(--card-soft); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-strong), var(--brand)); border-radius: 999px; transition: width 0.8s cubic-bezier(0.25,1,0.5,1); } /* ===================================================================== DASHBOARD (backoffice) - estilo screenshot 2 ===================================================================== */ /* Fondo hero del backoffice (bg-dash.jpg) detras del contenido, con fade a negro */ .dash-hero { position: absolute; top: 0; left: 0; right: 0; height: 420px; z-index: 0; pointer-events: none; overflow: hidden; } .dash-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center top; } .dash-hero-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.9) 80%, #000 100%); } /* Etiqueta de seccion del sidebar (MAIN / COMMUNITY / ...) */ .nav-section { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); padding: 0 0.75rem; margin: 1.1rem 0 0.45rem; } .nav-section:first-child { margin-top: 0; } /* Tarjeta promocional del sidebar (Founders) con imagen de fondo */ .sidebar-promo { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: 1.1rem; border: 1px solid var(--border); } .sidebar-promo .promo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 0.6s ease; } .sidebar-promo:hover .promo-bg { transform: scale(1.06); } .sidebar-promo .promo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,11,0.35) 0%, rgba(5,7,11,0.82) 100%); z-index: 1; } .sidebar-promo > * { position: relative; z-index: 2; } /* Stat cards con foto de fondo (balance / tickets / units / referrals) */ .stat-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 160px; border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; padding: 1.15rem 1.25rem; transition: border-color 0.25s ease, transform 0.25s ease; } .stat-photo:hover { border-color: var(--border-strong); transform: translateY(-2px); } .stat-photo .stat-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 0.7s cubic-bezier(0.25,1,0.5,1); } .stat-photo:hover .stat-bg { transform: scale(1.07); } .stat-photo .stat-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(5,7,11,0.92) 0%, rgba(5,7,11,0.62) 42%, rgba(5,7,11,0.18) 100%); } .stat-photo > * { position: relative; z-index: 2; } .stat-photo .stat-link { color: var(--brand); font-size: 12px; display: inline-flex; align-items: center; gap: 0.35rem; transition: gap 0.2s ease; } .stat-photo:hover .stat-link { gap: 0.6rem; } /* Quick start: stepper horizontal (escritorio). No fijamos `display` aqui a proposito: Tailwind controla la visibilidad con `hidden lg:grid` (en movil se oculta y se muestra la lista vertical). Si pusieramos display:grid, esta hoja (cargada despues de Tailwind) sobreescribiria `.hidden`. */ .quicksteps { grid-template-columns: repeat(5, 1fr); } .quickstep { position: relative; text-align: center; padding: 0 0.4rem; } .quickstep .qs-line { position: absolute; top: 28px; left: 50%; right: -50%; height: 0; border-top: 1.5px dotted var(--border-strong); z-index: 0; } .quickstep:last-child .qs-line { display: none; } .quickstep.done .qs-line { border-top-color: rgba(32,227,178,0.5); } .quickstep .qs-badge { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 0.9rem; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); color: var(--text-muted); background: #070a0f; } .quickstep.done .qs-badge { background: var(--brand); border-color: var(--brand); color: #00150f; } .quickstep .qs-badge i { font-size: 22px; } .quickstep .qs-num { color: var(--text); font-size: 14px; font-weight: 600; } .quickstep .qs-title { font-size: 14px; font-weight: 500; margin-top: 0.1rem; } .quickstep .qs-desc { font-size: 12px; color: var(--text-dim); margin-top: 0.45rem; line-height: 1.45; } /* ===================================================================== ECOSISTEMA - Peleadores, gimnasios y rankings ===================================================================== */ /* Tarjeta de peleador (directorio y rosters) */ .fighter-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: border-color .25s, transform .25s; } .fighter-card:hover { border-color: rgba(32,227,178,0.32); transform: translateY(-3px); } .fighter-card-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(180deg,#11151c,#05070a); } .fighter-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .fighter-card:hover .fighter-card-img img { transform: scale(1.06); } .fighter-card-veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,7,10,0.85) 100%); } .fighter-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.12); font-size: 3rem; } .fighter-badge { position: absolute; top: 10px; right: 10px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: rgba(32,227,178,0.9); color: #00150f; display: flex; align-items: center; justify-content: center; font-size: 14px; } .fighter-avail { position: absolute; bottom: 10px; left: 10px; z-index: 2; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(32,227,178,0.15); border: 1px solid rgba(32,227,178,0.4); color: var(--brand); } .fighter-avail-lg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: rgba(32,227,178,0.12); border: 1px solid rgba(32,227,178,0.35); color: var(--brand); } /* Hero de perfil (peleador / gimnasio) */ .fighter-hero { position: relative; min-height: 420px; overflow: hidden; } .fighter-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .fighter-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,10,0.82) 0%, rgba(5,7,10,0.6) 40%, var(--bg) 100%); } .fighter-portrait { width: 190px; height: 240px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #0b0f15; box-shadow: 0 24px 60px rgba(0,0,0,0.6); flex: none; } .fighter-portrait img { width: 100%; height: 100%; object-fit: cover; } /* Historial de peleas */ .record-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .record-row:last-child { border-bottom: none; } .record-result { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .record-win { background: rgba(32,227,178,0.15); color: var(--brand); border: 1px solid rgba(32,227,178,0.35); } .record-loss { background: rgba(255,90,90,0.12); color: #ff7b7b; border: 1px solid rgba(255,90,90,0.3); } .record-draw, .record-nc { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border: 1px solid var(--border); font-size: 11px; } /* Rankings */ .rank-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; transition: background .2s, border-color .2s; } .rank-row:hover { background: rgba(255,255,255,0.03); border-color: var(--border); } .rank-pos { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: rgba(255,255,255,0.75); } .rank-champ .rank-pos { background: var(--brand); border-color: var(--brand); color: #00150f; } /* Video embebido responsive (highlights y streaming) */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Iconos sociales */ .social-dot { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: rgba(255,255,255,0.7); transition: all .2s; } .social-dot:hover { color: var(--brand); border-color: rgba(32,227,178,0.4); background: rgba(32,227,178,0.08); } /* Fight card en la pagina del evento */ .bout-row { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); } .bout-main { border-color: rgba(32,227,178,0.3); background: rgba(32,227,178,0.05); } .bout-side { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .bout-side.right { flex-direction: row-reverse; text-align: right; } .bout-ph { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.05); flex: none; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); } .bout-ph img { width: 100%; height: 100%; object-fit: cover; } .bout-vs { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,0.35); padding: 0 6px; } .bout-winner { color: var(--brand); } /* ===================================================================== STREAMING - reproductor, muro PPV y chat en vivo ===================================================================== */ /* Indicador LIVE */ .live-dot { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.12em; padding:5px 11px; border-radius:999px; background:rgba(255,60,80,0.14); border:1px solid rgba(255,60,80,0.42); color:#ff5d6c; } .live-dot span { width:7px; height:7px; border-radius:50%; background:#ff5d6c; animation:livePulse 1.4s infinite; } @keyframes livePulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.82);} } /* Muro de pago PPV */ .ppv-gate { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--border); min-height:440px; display:flex; align-items:center; justify-content:center; } .ppv-gate-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(6px) saturate(.7); transform:scale(1.06); } .ppv-gate-veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,7,10,.86), rgba(5,7,10,.94)); } .ppv-gate-body { position:relative; z-index:2; text-align:center; padding:48px 28px; } /* Panel de chat */ .chat-panel { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; height:620px; } .chat-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex:none; } .chat-live-tag { font-size:10px; font-weight:800; letter-spacing:.1em; color:#ff5d6c; border:1px solid rgba(255,60,80,.4); background:rgba(255,60,80,.12); padding:3px 8px; border-radius:999px; } .chat-body { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:9px; scrollbar-width:thin; } .chat-body::-webkit-scrollbar { width:6px; } .chat-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:3px; } .chat-msg { font-size:14px; line-height:1.45; word-break:break-word; animation:chatIn .22s ease-out; } @keyframes chatIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} } .chat-msg.pinned { background:rgba(32,227,178,.08); border-left:2px solid var(--brand); padding:7px 10px; border-radius:0 8px 8px 0; } .chat-author { color:var(--brand); font-weight:600; margin-right:6px; } .chat-text { color:rgba(255,255,255,.78); } .chat-form { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); flex:none; } .chat-form input { flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:999px; padding:.6rem 1rem; color:var(--text); font-size:14px; outline:none; } .chat-form input:focus { border-color:rgba(32,227,178,.45); } .chat-form button { width:40px; height:40px; border-radius:50%; background:var(--brand); color:#00150f; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:opacity .2s; } .chat-form button:hover { opacity:.85; } .chat-form-locked { padding:12px 14px; border-top:1px solid var(--border); flex:none; } .chat-error { color:#ff7b7b; font-size:12px; padding:0 16px 10px; min-height:0; } @media (max-width: 1023px) { .chat-panel { height:460px; } } /* ===================================================================== GUIAS (admin y usuario) - secciones con capturas ===================================================================== */ .guide-nav { position: sticky; top: 76px; } .guide-nav a { display:block; padding:.5rem .75rem; border-radius:10px; font-size:13px; color:rgba(255,255,255,.55); border-left:2px solid transparent; } .guide-nav a:hover { color:#fff; background:rgba(255,255,255,.04); } .guide-nav a.on { color:var(--brand); border-left-color:var(--brand); background:rgba(32,227,178,.06); } .guide-sec { scroll-margin-top: 90px; } .guide-shot { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#05070a; } .guide-shot img { width:100%; display:block; } .guide-shot figcaption { padding:10px 14px; font-size:12px; color:rgba(255,255,255,.45); border-top:1px solid var(--border); background:rgba(255,255,255,.02); } .guide-shot:hover { border-color:rgba(32,227,178,.3); } .guide-steps { counter-reset: gstep; } .guide-steps li { counter-increment: gstep; position:relative; padding-left:2.4rem; margin-bottom:.85rem; color:rgba(255,255,255,.62); font-size:14px; line-height:1.55; } .guide-steps li::before { content: counter(gstep); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:rgba(32,227,178,.14); border:1px solid rgba(32,227,178,.35); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; } .guide-tip { display:flex; gap:12px; padding:14px 16px; border-radius:14px; background:rgba(32,227,178,.06); border:1px solid rgba(32,227,178,.22); font-size:13.5px; color:rgba(255,255,255,.7); } .guide-tip i { color:var(--brand); font-size:18px; flex:none; margin-top:1px; } .guide-warn { background:rgba(255,93,108,.06); border-color:rgba(255,93,108,.25); } .guide-warn i { color:#ff7b7b; } /* Ilustraciones SVG animadas de la guia del usuario */ .gsvg { width:100%; max-width:230px; } .gsvg .dash { stroke-dasharray: 6 6; animation: gdash 1.4s linear infinite; } @keyframes gdash { to { stroke-dashoffset: -24; } } .gsvg .pulse { animation: gpulse 2s ease-in-out infinite; transform-origin: center; } @keyframes gpulse { 0%,100%{ opacity:.35; transform:scale(.94);} 50%{ opacity:1; transform:scale(1.04);} } .gsvg .float { animation: gfloat 3s ease-in-out infinite; } @keyframes gfloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} } .gsvg .draw { stroke-dasharray: 160; stroke-dashoffset: 160; animation: gdraw 2.4s ease forwards infinite; } @keyframes gdraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .gsvg .dash, .gsvg .pulse, .gsvg .float, .gsvg .draw { animation: none; } .gsvg .draw { stroke-dashoffset: 0; } } /* ===================================================================== REPRODUCTOR MUMVI (Plyr con la piel de la marca) El proveedor (YouTube/Vimeo) solo entrega el video: los controles, los colores y el logo son de MUMVI. ===================================================================== */ :root { --plyr-color-main: #20E3B2; --plyr-video-background: #05070a; --plyr-video-control-color: #fff; --plyr-video-control-color-hover: #04120d; --plyr-video-controls-background: linear-gradient(transparent, rgba(5,7,10,.92)); --plyr-menu-background: rgba(10,14,20,.97); --plyr-menu-color: #cdd5df; --plyr-menu-border-color: rgba(255,255,255,.08); --plyr-badge-background: #20E3B2; --plyr-badge-text-color: #04120d; --plyr-tooltip-background: rgba(10,14,20,.97); --plyr-tooltip-color: #fff; --plyr-range-thumb-background: #20E3B2; --plyr-control-spacing: 12px; --plyr-font-family: 'Geist', system-ui, sans-serif; --plyr-font-size-base: 14px; } .mumvi-player { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: #05070a; } .mumvi-player .plyr { border-radius: 18px; height: 100%; } .mumvi-player .plyr__control--overlaid { background: rgba(32,227,178,.92); color: #04120d; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .mumvi-player .plyr__control--overlaid:hover { background: #20E3B2; } .mumvi-player .plyr__control:hover { background: #20E3B2; } .mumvi-player .plyr__menu__container { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; } /* Marca MUMVI sobre el video (se atenua cuando se ocultan los controles) */ .mumvi-player .mp-brand { position: absolute; top: 16px; left: 18px; height: 20px; z-index: 4; filter: brightness(0) invert(1); opacity: .55; pointer-events: none; transition: opacity .3s; } .mumvi-player.plyr--hide-controls .mp-brand, .mumvi-player .plyr--hide-controls ~ .mp-brand { opacity: .2; } /* Indicador LIVE sobre el video */ .mumvi-player .mp-live { position: absolute; top: 14px; right: 16px; z-index: 4; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 5px 11px; border-radius: 999px; background: rgba(255,60,80,.16); border: 1px solid rgba(255,60,80,.45); color: #ff5d6c; backdrop-filter: blur(6px); } .mumvi-player .mp-live span { width: 7px; height: 7px; border-radius: 50%; background: #ff5d6c; animation: livePulse 1.4s infinite; } @media (max-width: 640px) { .mumvi-player .mp-brand { height: 15px; top: 12px; left: 13px; } .mumvi-player .mp-live { top: 11px; right: 12px; font-size: 10px; padding: 4px 9px; } } /* Portada propia: oculta el estado "sin iniciar" del proveedor */ .mumvi-player .mp-cover { position:absolute; inset:0; z-index:6; cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#05070a; transition:opacity .45s, visibility .45s; } .mumvi-player .mp-cover.is-hidden { opacity:0; visibility:hidden; pointer-events:none; } .mumvi-player .mp-cover > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .mumvi-player .mp-cover-veil { position:absolute; inset:0; background:radial-gradient(600px 320px at 50% 45%, rgba(5,7,10,.35), rgba(5,7,10,.82)); } .mumvi-player .mp-cover-play { position:relative; z-index:2; width:84px; height:84px; border-radius:50%; border:0; cursor:pointer; background:rgba(32,227,178,.94); color:#04120d; font-size:30px; display:flex; align-items:center; justify-content:center; box-shadow:0 18px 50px rgba(0,0,0,.55); transition:transform .25s, background .25s; } .mumvi-player .mp-cover-play:hover { transform:scale(1.07); background:#20E3B2; } .mumvi-player .mp-cover-play::after { content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(32,227,178,.45); animation:livePulse 2s ease-in-out infinite; } .mumvi-player .mp-cover-meta { position:absolute; left:0; right:0; bottom:26px; z-index:2; text-align:center; padding:0 24px; } .mumvi-player .mp-cover-title { font-size:19px; font-weight:600; color:#fff; } .mumvi-player .mp-cover-sub { font-size:13px; color:rgba(255,255,255,.5); margin-top:3px; } /* Escudos: impiden llegar a la marca del proveedor con el clic */ .mumvi-player .mp-shield { position:absolute; z-index:5; } .mumvi-player .mp-shield-top { top:0; left:0; right:0; height:64px; } .mumvi-player .mp-shield-br { right:0; bottom:52px; width:130px; height:46px; } @media (max-width:640px){ .mumvi-player .mp-cover-play { width:64px; height:64px; font-size:23px; } .mumvi-player .mp-cover-title { font-size:15px; } .mumvi-player .mp-shield-top { height:44px; } } /* Reproductor compacto para los highlights del peleador */ .mumvi-player-sm { border-radius: 0; border: 0; } .mumvi-player-sm .plyr { border-radius: 0; } .mumvi-player-sm .plyr__control--overlaid { padding: 14px; } /* ===================================================================== ASISTENTE DE IA (chat de soporte, usuario y admin) ===================================================================== */ .ai-shell { display:grid; grid-template-columns:260px 1fr; gap:20px; height:calc(100vh - 190px); min-height:520px; } @media (max-width:1023px){ .ai-shell { grid-template-columns:1fr; height:auto; } .ai-sessions { display:none; } } .ai-sessions { display:flex; flex-direction:column; gap:6px; overflow-y:auto; padding-right:4px; } .ai-sessions::-webkit-scrollbar { width:5px; } .ai-sessions::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:3px; } .ai-sess { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid transparent; color:rgba(255,255,255,.6); font-size:13px; transition:.18s; } .ai-sess:hover { background:rgba(255,255,255,.04); color:#fff; } .ai-sess.on { background:rgba(32,227,178,.08); border-color:rgba(32,227,178,.28); color:var(--brand); } .ai-sess span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-panel { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; min-height:0; } .ai-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); flex:none; } .ai-head .dot { width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px var(--brand); } .ai-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; min-height:280px; } .ai-body::-webkit-scrollbar { width:6px; } .ai-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:3px; } .ai-msg { display:flex; gap:12px; max-width:100%; animation:aiIn .25s ease-out; } @keyframes aiIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} } .ai-msg .av { width:32px; height:32px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-size:16px; } .ai-msg.bot .av { background:rgba(32,227,178,.14); border:1px solid rgba(32,227,178,.3); color:var(--brand); } .ai-msg.me { flex-direction:row-reverse; } .ai-msg.me .av { background:rgba(255,255,255,.07); border:1px solid var(--border); color:rgba(255,255,255,.7); } .ai-bubble { padding:12px 15px; border-radius:14px; font-size:14.5px; line-height:1.6; max-width:min(660px,86%); word-break:break-word; } .ai-msg.bot .ai-bubble { background:rgba(255,255,255,.04); border:1px solid var(--border); color:rgba(255,255,255,.82); border-top-left-radius:4px; } .ai-msg.me .ai-bubble { background:rgba(32,227,178,.12); border:1px solid rgba(32,227,178,.26); color:#dff9f1; border-top-right-radius:4px; } .ai-link { display:inline-flex; align-items:center; gap:6px; margin:6px 6px 0 0; padding:6px 12px; border-radius:999px; background:rgba(32,227,178,.12); border:1px solid rgba(32,227,178,.32); color:var(--brand); font-size:13px; font-weight:500; transition:.18s; } .ai-link:hover { background:var(--brand); color:#04120d; } .ai-shot { display:block; margin-top:10px; width:100%; max-width:460px; border-radius:10px; border:1px solid var(--border); } .ai-li { display:block; padding-left:16px; position:relative; } .ai-li::before { content:"•"; position:absolute; left:2px; color:var(--brand); } .ai-form { display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--border); flex:none; } .ai-form input { flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:999px; padding:.75rem 1.1rem; color:var(--text); font-size:14.5px; outline:none; } .ai-form input:focus { border-color:rgba(32,227,178,.45); } .ai-form button { width:44px; height:44px; border-radius:50%; background:var(--brand); color:#04120d; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; transition:.18s; } .ai-form button:hover { opacity:.88; } .ai-form button:disabled { opacity:.4; cursor:not-allowed; } .ai-sugg { display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 16px; } .ai-sugg button { padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--border); color:rgba(255,255,255,.65); font-size:13px; cursor:pointer; transition:.18s; } .ai-sugg button:hover { border-color:rgba(32,227,178,.4); color:var(--brand); } .ai-typing { display:inline-flex; gap:4px; align-items:center; } .ai-typing i { width:6px; height:6px; border-radius:50%; background:var(--brand); animation:aiBlink 1.2s infinite; } .ai-typing i:nth-child(2){ animation-delay:.2s } .ai-typing i:nth-child(3){ animation-delay:.4s } @keyframes aiBlink { 0%,80%,100%{opacity:.25; transform:scale(.85)} 40%{opacity:1; transform:scale(1)} } .ai-empty { text-align:center; margin:auto; padding:30px 20px; } .ai-empty .ic { width:62px; height:62px; border-radius:18px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:rgba(32,227,178,.12); border:1px solid rgba(32,227,178,.28); color:var(--brand); font-size:28px; } /* Hilos de ticket */ .tk-msg { display:flex; gap:12px; padding:16px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.02); } .tk-msg.is-ai { border-color:rgba(32,227,178,.22); background:rgba(32,227,178,.05); } .tk-msg.is-admin { border-color:rgba(120,160,255,.22); background:rgba(120,160,255,.05); } .tk-badge { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:999px; } /* Etapas del Founders Club: agotada / siguiente */ .stage-soldout { opacity: .62; } .stage-soldout:hover { opacity: .78; } .stage-badge-sold { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.65); } .stage-badge-next { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(32,227,178,.06); border: 1px solid rgba(32,227,178,.22); color: rgba(32,227,178,.8); }