/* ========================================================= RiosTec Comunidad — "Comunidad KiweGame" Tema oscuro azul/blanco/negro (variante gamer de la marca RiosTec). Estructura inspirada en el tema "gamer" de rt-bio, RECOLOREADA a azul. Mobile-first. BEM. Sin dependencias externas. Color/tipografía por variables. ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* --------------------------------------------------------- SISTEMA DE 2 TEMAS CONMUTABLES (SPEC 0006). El MISMO set de tokens con 2 valores → el resto del CSS (y el panel) solo consume var(--…): así público + panel + login obedecen el tema activo. - oled → "OLED" (oscuro azul eléctrico sobre negro; default del modo oscuro del SO). Es el tema base: superficies casi negras con leve tinte azul. - claro → "Día" (fondo claro on-brand, texto oscuro; default modo claro). El tema se fija client-side (data-tema en ) por el script anti-FOUC + el conmutador (theme.js), sin variar el HTML por request → compatible con el caché LiteSpeed. Contrato: NINGÚN color hardcodeado fuera de estos bloques. Tokens SOBRE azul: --sobre-acento (texto/íconos sobre gradiente o fill azul). En claro --blanco invierte a navy oscuro, así que NO sirve sobre botón azul. --------------------------------------------------------- */ [data-tema="oled"] { --azul: #35a8ff; --azul-claro: #7ccbff; --azul-dim: rgba(53, 168, 255, 0.15); --azul-borde: rgba(53, 168, 255, 0.42); /* SPEC 0020: azul FUERTE para fill sólido con texto blanco (--sobre-acento). El --azul de marca sobre blanco cae bajo AA (~2.6:1); este llega ≥4.5:1 (medido ~6.3:1). Solo lo usa el chip "Dueño" del hub de comunidad (jerarquía máxima del control de nivel). */ --azul-fuerte: #0d5cc0; --negro: #000000; --azul-oscuro: #05070c; --superficie: #0b0e16; --superficie-2: #141a26; --borde: rgba(120, 170, 240, 0.18); --top-bg: rgba(0, 0, 0, 0.86); --scrim: rgba(7, 12, 24, 0.7); color-scheme: dark; --blanco: #f5f8ff; --gris: #93a6c6; --gris-suave: #bccce6; --vivo: #ff5566; --vivo-rgb: 255, 85, 102; /* "Jugando ahora" (SPEC 0011): violeta, distinto del rojo "En vivo". */ --jugando: #b98cff; --jugando-rgb: 185, 140, 255; --ok: #35e29a; --ok-rgb: 53, 226, 154; --verde-tinta: #05210f; --grad-azul: linear-gradient(135deg, #35a8ff, #7ccbff); --sobre-acento: #ffffff; --texto: var(--blanco); --texto-suave: var(--gris-suave); --error: #ff6b76; --error-rgb: 255, 107, 118; --grad: var(--grad-azul); /* Negro puro: glow casi nulo + jerarquía por borde/elevación, no por glow. */ --fondo-glows: radial-gradient(ellipse 70% 45% at 15% 0%, rgba(53,168,255,0.07) 0%, transparent 55%); --rejilla-color: rgba(53,168,255,0.02); --sombra-card: 0 0 0 1px rgba(120,170,240,0.06); --sombra-hover: 0 6px 26px rgba(53,168,255,0.16); --sombra-modal: 0 20px 60px rgba(0,0,0,0.7); --font-head: 'Rajdhani', sans-serif; --font-body: 'Inter', sans-serif; --radio: 14px; --radio-sm: 10px; --tap: 44px; --p-twitch: #a970ff; --p-youtube: #ff6161; --p-tiktok: var(--azul-claro); --p-facebook: #3b8bff; --p-kick: #53fc18; --p-instagram: #e56ab3; --p-x: #e7ecf5; /* Espíritus (SPEC 0016 presentación v2): el RECUADRO del cromo se colorea por VARIANTE (no por rareza) vía .rtc-esp--v-*; la rareza va como etiqueta NO cromática (.rtc-esp__rareza). Los 4 tokens de variante (incl. --var-estandar, neutro/acero sobrio) quedan AA en los 2 temas. Los --rareza-* se conservan solo por si un texto informativo los necesita, pero ya NO tiñen el marco. */ --rareza-rare: #7aa2ff; --rareza-rare-rgb: 122, 162, 255; --rareza-epic: #c264ff; --rareza-epic-rgb: 194, 100, 255; --rareza-legendary: #ff9b3d; --rareza-legendary-rgb: 255, 155, 61; --rareza-mythic: #ffd24a; --rareza-mythic-rgb: 255, 210, 74; --var-estandar: #a6b4cc; --var-estandar-rgb: 166, 180, 204; --var-gold: #f5c542; --var-gold-rgb: 245, 197, 66; /* Oro PARA TEXTO (≥AA sobre tintes): en oled el gold brillante ya contrasta. */ --oro-texto: #f5c542; --var-gummy: #ff8ac2; --var-gummy-rgb: 255, 138, 194; --var-galaxy: #a78bfa; --var-galaxy-rgb: 167, 139, 250; --grad-galaxy: linear-gradient(135deg, #7c5cff 0%, #22d3ee 55%, #ff6ec7 100%); --esp-falta-opacidad: 0.42; } [data-tema="claro"] { --azul: #2f9bff; --azul-claro: #0b62c9; --azul-dim: rgba(47, 155, 255, 0.12); --azul-borde: rgba(47, 155, 255, 0.45); /* SPEC 0020: azul FUERTE (fill del chip "Dueño") con texto blanco ≥AA (medido ~8:1). */ --azul-fuerte: #0d4f9e; --negro: #eef2f8; /* lienzo claro (rol invertido) */ --azul-oscuro: #dce6f5; --superficie: #ffffff; --superficie-2: #f1f5fb; --borde: rgba(15, 40, 80, 0.14); --top-bg: rgba(238, 242, 248, 0.86); --scrim: rgba(7, 12, 24, 0.7); /* velo navy: aísla el modal también en Día */ color-scheme: light; --blanco: #0f1b2e; /* "texto principal": ahora navy oscuro sobre claro */ --gris: #5b6b85; --gris-suave: #3f4f6b; --vivo: #d0142a; --vivo-rgb: 208, 20, 42; /* "Jugando ahora" (SPEC 0011): violeta AA sobre claro. */ --jugando: #6d28d9; --jugando-rgb: 109, 40, 217; /* Verde de éxito en claro: oscurecido a #0b7a45 para AA transversal — texto --verde-tinta (blanco) sobre relleno --ok da 5.42:1 (badge .rtc-estado--abierto Y CTA WhatsApp). */ --ok: #0b7a45; --ok-rgb: 11, 122, 69; --verde-tinta: #ffffff; --grad-azul: linear-gradient(135deg, #1668d6, #2f9bff); --sobre-acento: #ffffff; --texto: var(--blanco); --texto-suave: var(--gris-suave); --error: #c81e2c; --error-rgb: 200, 30, 44; --grad: var(--grad-azul); --fondo-glows: none; --rejilla-color: transparent; --sombra-card: 0 1px 3px rgba(15,30,60,0.08), 0 8px 24px rgba(15,30,60,0.06); --sombra-hover: 0 10px 28px rgba(15,30,60,0.12); --sombra-modal: 0 24px 60px rgba(15,30,60,0.20); --font-head: 'Rajdhani', sans-serif; --font-body: 'Inter', sans-serif; --radio: 14px; --radio-sm: 10px; --tap: 44px; --p-twitch: #772ce8; --p-youtube: #e60000; --p-tiktok: #111111; --p-facebook: #1877f2; --p-kick: #17a34a; --p-instagram: #c13584; --p-x: #0f1419; /* Espíritus (SPEC 0016 presentación v2): mismas familias, valores MÁS PROFUNDOS para contraste AA sobre fondo claro. --var-gold baja a #946a00 (el histórico #a97b00 no alcanzaba AA). --var-estandar es un acero sobrio legible sobre blanco. */ --rareza-rare: #3b5bdb; --rareza-rare-rgb: 59, 91, 219; --rareza-epic: #8b2fd6; --rareza-epic-rgb: 139, 47, 214; --rareza-legendary: #c2560a; --rareza-legendary-rgb: 194, 86, 10; --rareza-mythic: #9a7000; --rareza-mythic-rgb: 154, 112, 0; --var-estandar: #5f6f88; --var-estandar-rgb: 95, 111, 136; --var-gold: #946a00; --var-gold-rgb: 148, 106, 0; /* Oro PARA TEXTO en claro: más oscuro que el --var-gold (marco 3:1) para pasar AA como texto (≥4.5) sobre tintes claros; NO afecta al oro de los espíritus. */ --oro-texto: #6e4f00; --var-gummy: #c02a7a; --var-gummy-rgb: 192, 42, 122; --var-galaxy: #6d28d9; --var-galaxy-rgb: 109, 40, 217; --grad-galaxy: linear-gradient(135deg, #5b3fd6 0%, #0e8fb0 55%, #c2569e 100%); --esp-falta-opacidad: 0.5; } html, body { min-height: 100vh; background-color: var(--negro); font-family: var(--font-body); color: var(--blanco); overflow-x: hidden; } body.rtc { background-image: var(--fondo-glows); background-attachment: fixed; } body.rtc::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--rejilla-color) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla-color) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } /* Accesibilidad: enlace para saltar al contenido. */ .rtc-skip { position: absolute; left: -9999px; top: 0; background: var(--azul); color: var(--sobre-acento); padding: 10px 16px; border-radius: 0 0 var(--radio-sm) 0; z-index: 1000; } .rtc-skip:focus { left: 0; } /* --------------------------------------------------------- TOP BAR + NAV --------------------------------------------------------- */ .rtc-top { position: sticky; top: 0; z-index: 50; background: var(--top-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); } .rtc-top__in { max-width: 1080px; margin: 0 auto; padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .rtc-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--blanco); } .rtc-brand__logo { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--grad-azul); color: var(--sobre-acento); font-size: 14px; } .rtc-brand__txt { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.02em; } .rtc-nav { display: flex; gap: 4px; } .rtc-nav__link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: 999px; color: var(--gris-suave); text-decoration: none; font-size: 0.95rem; font-weight: 600; transition: background 0.2s, color 0.2s; } .rtc-nav__link:hover, .rtc-nav__link:focus-visible { background: var(--azul-dim); color: var(--blanco); } .rtc-nav__link.is-active { background: var(--grad-azul); color: var(--sobre-acento); } /* Separador entre las secciones públicas y la acción de Acceso. */ .rtc-nav__sep { width: 1px; align-self: center; height: 22px; margin: 0 4px; background: var(--borde); } /* "Acceso / Mi panel": acción (no una sección más) → contorno azul + ícono. */ .rtc-nav__link--acceso { gap: 7px; color: var(--blanco); border: 1px solid var(--azul); } .rtc-nav__link--acceso:hover, .rtc-nav__link--acceso:focus-visible { background: var(--azul-dim); color: var(--blanco); } .rtc-nav__accico { display: inline-flex; } .rtc-nav__accico svg { width: 17px; height: 17px; } /* --------------------------------------------------------- CONMUTADOR DE TEMA (SPEC 0006). Botón redondo en la nav que alterna oled ↔ claro. Muestra el ícono del tema ACTIVO: los íconos viven en el DOM y el CSS muestra el que corresponde a [data-tema] del (fijado por el anti-FOUC antes del primer paint → sin parpadeo). theme.js solo actualiza aria-label/title/meta al ciclar. --------------------------------------------------------- */ .rtc-temabtn { width: var(--tap); height: var(--tap); min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gris-suave); cursor: pointer; flex-shrink: 0; transition: background-color 0.18s, color 0.18s, transform 0.12s; } .rtc-temabtn:hover, .rtc-temabtn:focus-visible { background: var(--azul-dim); color: var(--azul-claro); } .rtc-temabtn:active { transform: scale(0.94); } .rtc-temabtn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-temabtn__ico { display: none; align-items: center; justify-content: center; transition: transform 0.18s; } .rtc-temabtn__ico svg { width: 22px; height: 22px; } /* Solo el ícono del tema activo se muestra (según data-tema del ). */ [data-tema="oled"] .rtc-temabtn__ico--oled, [data-tema="claro"] .rtc-temabtn__ico--dia { display: inline-flex; } /* Micro-rotación al enfocar/pasar el cursor (guiño de "cambiar"). */ .rtc-temabtn:hover .rtc-temabtn__ico, .rtc-temabtn:focus-visible .rtc-temabtn__ico { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .rtc-temabtn, .rtc-temabtn__ico { transition: none; } .rtc-temabtn:hover .rtc-temabtn__ico, .rtc-temabtn:focus-visible .rtc-temabtn__ico { transform: none; } } /* Transición suave SOLO durante el cambio manual de tema (clase temporal que pone theme.js ~380ms). No afecta el primer paint ni los hovers permanentes. Se omite `background-image` a propósito: los gradientes/glows no interpolan suave y darían un salto; el cambio dominante (superficies, texto, bordes, sombras) sí transiciona. */ html.rtc-tema-anim, html.rtc-tema-anim *, html.rtc-tema-anim *::before, html.rtc-tema-anim *::after { transition: background-color 0.38s ease, color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease, fill 0.38s ease !important; } @media (prefers-reduced-motion: reduce) { html.rtc-tema-anim, html.rtc-tema-anim *, html.rtc-tema-anim *::before, html.rtc-tema-anim *::after { transition: none !important; } } /* Pantallas angostas: la nav respira (menos padding) y el Acceso baja a su propia fila. El umbral (520px) cubre móviles y phablets donde marca+nav+Acceso no caben cómodos en una sola fila (a ~480px el botón quedaba al límite y se recortaba). */ @media (max-width: 520px) { /* La nav toma la línea completa y se centra; `min-width:0` evita el desbordamiento clásico de flex (sin él, el contenido se salía del viewport y recortaba el botón de Acceso). */ .rtc-nav { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 6px 4px; } .rtc-nav__link { padding: 0 12px; font-size: 0.92rem; } .rtc-nav__sep { display: none; } /* El Acceso baja a su PROPIA fila a ancho completo: imposible que se recorte y queda como un tap-target generoso bajo las secciones. */ .rtc-nav__link--acceso { flex-basis: 100%; justify-content: center; } } /* --------------------------------------------------------- MAIN + secciones --------------------------------------------------------- */ .rtc-main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; /* Aire superior contenido: la franja no debe dejar medio viewport vacío. */ padding: 1rem 1rem 3rem; } /* --------------------------------------------------------- HERO (franja informativa del calendario): SIN marketing. Solo dato vivo — "Próximo stream" + stats (streamers / en vivo). Si el JS no llena nada (sin próximos ni en vivo y sin streamers), colapsa sin dejar hueco gracias al gap del flex. --------------------------------------------------------- */ .rtc-hero { display: flex; flex-direction: column; gap: 0.9rem; } /* El margen va en los HIJOS visibles (prox/stats), no en el contenedor: si ambos están ocultos (sin próximos, sin en-vivo y sin streamers) el hero no ocupa alto ni deja hueco antes del calendario. */ .rtc-hero__prox:not([hidden]), .rtc-hero__stats { margin-bottom: 0.3rem; } .rtc-sec__head { margin-bottom: 1.4rem; } .rtc-sec__titulo { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; background: var(--grad-azul); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rtc-sec__sub { color: var(--gris); font-size: 0.98rem; margin-top: 0.35rem; } .rtc-cargando, .rtc-vacio, .rtc-foot p { color: var(--gris); } /* Estado vacío "rico" del calendario: redirige al directorio + suscripción. */ .rtc-vacio--rico { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .rtc-vacio__tit { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--blanco); } .rtc-vacio__sub { color: var(--gris-suave); font-size: 0.98rem; } .rtc-vacio__cta { margin-top: 0.4rem; } .rtc-vacio__susc { color: var(--gris); font-size: 0.88rem; margin-top: 0.2rem; } /* --------------------------------------------------------- "EN VIVO AHORA" --------------------------------------------------------- */ .rtc-live { background: var(--superficie); border: 1px solid var(--azul-borde); border-radius: var(--radio); padding: 1rem; margin-bottom: 1.5rem; } .rtc-live__head { margin-bottom: 0.8rem; } .rtc-badge-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--vivo-rgb), 0.14); color: var(--vivo); border: 1px solid rgba(var(--vivo-rgb), 0.4); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .rtc-badge-live--lg { font-size: 14px; padding: 5px 16px; } /* ========================================================= "Jugando ahora" (SPEC 0011) — badge VIOLETA (--jugando), distinto del rojo "En vivo": disponibilidad para jugar juntos, no transmisión. El punto late; respeta prefers-reduced-motion (guard global al final del archivo). ========================================================= */ .rtc-badge-jugando { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--jugando-rgb), 0.16); color: var(--jugando); border: 1px solid rgba(var(--jugando-rgb), 0.45); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .rtc-badge-jugando--lg { font-size: 14px; padding: 5px 16px; } .rtc-badge-jugando__ico { display: inline-flex; width: 16px; height: 16px; animation: rtc-jugando-latido 2.4s ease-in-out infinite; } .rtc-badge-jugando__ico svg { width: 100%; height: 100%; } /* Latido sutil del gamepad (guard global de prefers-reduced-motion al final). */ @keyframes rtc-jugando-latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.82; } } /* ========================================================= Badge "Premium" (SPEC 0012) — insignia ORO, acento distinto del rojo "En vivo" y del violeta "Jugando". Marco/relleno con --var-gold-rgb; el TEXTO usa --oro-texto (AA en ambos temas por diseño). Informativo (no interactivo). ========================================================= */ .rtc-badge-premium { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--var-gold-rgb), 0.14); color: var(--oro-texto); border: 1px solid rgba(var(--var-gold-rgb), 0.45); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .rtc-badge-premium--lg { font-size: 14px; padding: 5px 16px; } .rtc-badge-premium__ico { display: inline-flex; color: var(--var-gold); font-size: 0.95em; line-height: 1; } /* ========================================================= Modos que juega — chips (perfil + tarjeta del directorio) ========================================================= */ .rtc-modos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .rtc-modos__chip { display: inline-flex; align-items: center; background: var(--azul-dim); color: var(--azul-claro); border: 1px solid var(--azul-borde); border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 600; } .rtc-modos__chip--sm { padding: 3px 10px; font-size: 0.75rem; } .rtc-card__modos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0.6rem 0 0; } /* ========================================================= Epic / Fortnite ID (perfil público) — valor + botón copiar ========================================================= */ .rtc-epic { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rtc-epic__id { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--blanco); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 6px 12px; word-break: break-all; } .rtc-epic__copiar { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 6px 12px; background: transparent; color: var(--azul-claro); border: 1px solid var(--azul-borde); border-radius: var(--radio-sm); font: inherit; font-weight: 600; cursor: pointer; } .rtc-epic__copiarico { display: inline-flex; width: 18px; height: 18px; } .rtc-epic__copiarico svg { width: 100%; height: 100%; } .rtc-live__lista { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; } .rtc-live__item { display: flex; align-items: center; gap: 12px; background: var(--superficie-2); border: 1px solid var(--azul-borde); border-radius: 999px; padding: 6px 8px 6px 6px; } /* Avatar con anillo gradiente azul (mismo lenguaje que las cards del directorio). */ .rtc-live__avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-azul); padding: 2px; flex-shrink: 0; } .rtc-live__avatar img, .rtc-live__avatar .rtc-card__ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--azul-oscuro); } .rtc-live__avatar .rtc-card__ini { font-size: 1rem; } .rtc-live__info { display: flex; flex-direction: column; line-height: 1.15; } .rtc-live__nombre { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--blanco); } .rtc-live__estado { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vivo); } .rtc-live__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 0 rgba(var(--vivo-rgb), 0.5); animation: rtc-latido 1.6s ease-out infinite; flex-shrink: 0; } .rtc-live__ver { min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 999px; background: var(--grad-azul); color: var(--sobre-acento); text-decoration: none; font-size: 0.9rem; font-weight: 600; flex-shrink: 0; transition: transform 0.15s; } .rtc-live__ver:hover, .rtc-live__ver:focus-visible { transform: translateY(-1px); } .rtc-live__ver:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-live__verico { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex-shrink: 0; } .rtc-live__verico svg { width: 100%; height: 100%; } /* --------------------------------------------------------- CALENDARIO --------------------------------------------------------- */ /* Mobile-first: el toggle y la etiqueta de zona se apilan (evita overflow en ≤390px). */ .rtc-cal__barra { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; } .rtc-cal__tz { color: var(--gris); font-size: 0.85rem; } /* Agenda (móvil por defecto): lista de días con sus streams. */ .rtc-cal__dia { margin-bottom: 1.4rem; } .rtc-cal__diahead { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--azul-claro); letter-spacing: 0.03em; text-transform: uppercase; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--borde); } .rtc-cal__lista { list-style: none; display: flex; flex-direction: column; gap: 10px; } .rtc-ev { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--azul); border-radius: var(--radio-sm); padding: 12px 14px; text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s; } .rtc-ev:hover, .rtc-ev:focus-visible { transform: translateY(-1px); border-color: var(--azul-borde); box-shadow: var(--sombra-hover); } .rtc-ev--en_vivo { border-left-color: var(--vivo); } .rtc-ev--finalizado { opacity: 0.6; } .rtc-ev__hora { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--blanco); white-space: nowrap; } .rtc-ev__cuerpo { min-width: 0; } .rtc-ev__titulo { font-weight: 600; font-size: 1rem; display: block; overflow-wrap: anywhere; /* el título envuelve (evita corte/overflow en móvil). */ } .rtc-ev__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: 0.82rem; color: var(--gris); } .rtc-ev__streamer { color: var(--azul-claro); font-weight: 600; } .rtc-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--azul-dim); color: var(--azul-claro); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Chip de TIPO de evento (SPEC 0004): colaboración / torneo / comunitario. Mismo lenguaje de chip azul (NO el rojo de "EN VIVO", que es semántico), con borde acentuado para distinguirlo de la plataforma. */ .rtc-chip--tipo { border: 1px solid var(--azul-borde); } /* --------------------------------------------------------- ACCIONES POR EVENTO (recordatorios / compartir, SPEC 0005) El

del calendario apila el evento + su fila de acciones. --------------------------------------------------------- */ .rtc-cal__lista > li { display: flex; flex-direction: column; gap: 6px; } .rtc-ev__acciones { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 2px; } /* Botón de acción compacto (secundario oscuro on-brand). */ .rtc-acc { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .rtc-acc:hover, .rtc-acc:focus-visible { border-color: var(--azul); background: var(--azul-dim); } .rtc-acc__ico { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; flex-shrink: 0; } .rtc-acc__ico svg { width: 100%; height: 100%; } /* Menú "Avísame" (Google Calendar / descargar .ics): superficie oscura elevada. */ .rtc-aviso { position: relative; display: inline-block; } .rtc-aviso__menu { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 200px; display: flex; flex-direction: column; padding: 6px; background: var(--superficie-2); border: 1px solid var(--azul-borde); border-radius: var(--radio-sm); box-shadow: var(--sombra-modal); } .rtc-aviso__op { display: block; min-height: var(--tap); padding: 10px 12px; border-radius: var(--radio-sm); color: var(--blanco); text-decoration: none; font-size: 0.9rem; font-weight: 600; } .rtc-aviso__op:hover, .rtc-aviso__op:focus-visible { background: var(--azul-dim); color: var(--azul-claro); } /* --------------------------------------------------------- BLOQUE "SUSCRIBIR CALENDARIO" + CTA grupo (pie del calendario) --------------------------------------------------------- */ .rtc-suscribir { margin-top: 1.6rem; padding: 1.2rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; gap: 1rem; } /* Cabecera de la tarjeta: badge "campana" (azul) + título + subtítulo de beneficio. */ .rtc-suscribir__cab { display: flex; align-items: center; gap: 0.85rem; } .rtc-suscribir__badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; background: var(--azul-dim); color: var(--azul-claro); } .rtc-suscribir__badge svg { width: 22px; height: 22px; } .rtc-suscribir__txt { min-width: 0; } .rtc-suscribir__titulo { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--blanco); } .rtc-suscribir__sub { color: var(--gris-suave); font-size: 0.95rem; margin-top: 0.2rem; } /* Fila de acciones: primario (gradiente) dominante; WhatsApp secundario verde tras un separador "o"; "Copiar enlace" baja como fallback ghost (abajo). */ .rtc-suscribir__acciones { display: flex; flex-direction: column; gap: 10px; } .rtc-suscribir__primario, .rtc-suscribir__wa { width: 100%; justify-content: center; } .rtc-suscribir__o { display: block; text-align: center; color: var(--gris); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; } /* Fallback sutil: enlace de bajo peso que conserva el contrato de copiar (data-rtc-copiar + .rtc-btn__txt). Tap-target real ≥44px aunque sea ligero. */ .rtc-suscribir__copiar { display: inline-flex; align-self: center; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; background: none; border: 0; color: var(--gris-suave); font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; cursor: pointer; } .rtc-suscribir__copiarico { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex-shrink: 0; } .rtc-suscribir__copiarico svg { width: 100%; height: 100%; } .rtc-suscribir__copiar:hover, .rtc-suscribir__copiar:focus-visible { color: var(--azul-claro); } .rtc-suscribir__copiar.is-ok { color: var(--ok); } .rtc-suscribir__copiar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: var(--radio-sm); } /* Botón estándar reutilizable (primario / secundario / WhatsApp). */ .rtc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; } .rtc-btn__ico { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; flex-shrink: 0; } .rtc-btn__ico svg { width: 100%; height: 100%; } .rtc-btn--primario { background: var(--grad-azul); color: var(--sobre-acento); } .rtc-btn--sec { background: var(--superficie-2); border-color: var(--borde); color: var(--blanco); } .rtc-btn--sec:hover, .rtc-btn--sec:focus-visible { border-color: var(--azul); } .rtc-btn--sec.is-ok { border-color: var(--ok); color: var(--ok); } /* Botón compacto (atajos del tracker de espíritus). Mantiene tap-target por padding. */ .rtc-btn--mini { min-height: 40px; padding: 0 14px; font-size: 0.85rem; background: var(--superficie-2); border-color: var(--borde); color: var(--texto); } .rtc-btn--mini:hover, .rtc-btn--mini:focus-visible { border-color: var(--azul); } .rtc-btn--wa { background: var(--ok); color: var(--verde-tinta); } /* Foco visible azul en todos los controles de acción. */ .rtc-acc:focus-visible, .rtc-aviso__op:focus-visible, .rtc-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } @media (min-width: 860px) { /* Desktop: cabecera y acciones en una fila; el primario manda, WhatsApp a su lado con el "o"; el "Copiar enlace" sigue debajo a la derecha, discreto. */ .rtc-suscribir { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "cab acc" "cab copiar"; align-items: center; column-gap: 1.4rem; row-gap: 0.4rem; } .rtc-suscribir__cab { grid-area: cab; } .rtc-suscribir__acciones { grid-area: acc; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .rtc-suscribir__primario, .rtc-suscribir__wa { width: auto; } .rtc-suscribir__copiar { grid-area: copiar; justify-self: end; align-self: start; } } /* --------------------------------------------------------- DIRECTORIO --------------------------------------------------------- */ /* Mobile-first: una sola columna a 390px (sin minmax que fuerce overflow). En desktop pasamos a auto-fit (ver @media) para que el nº de columnas siga al nº de streamers: con 2, dos columnas centradas; nunca una 3ª columna huérfana. */ .rtc-dir__grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; justify-content: center; } /* Cada card no crece sin límite: con pocos streamers el grid no estira las cards a lo ancho. width:100% para llenar su columna en móvil (≤390px sano). */ .rtc-card { max-width: 520px; width: 100%; } .rtc-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-card); padding: 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; } .rtc-card__head { display: flex; gap: 12px; align-items: center; } .rtc-card__avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--grad-azul); padding: 2px; flex-shrink: 0; } .rtc-card__avatar img, .rtc-card__ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; } .rtc-card__ini { background: var(--azul-oscuro); font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--azul-claro); } .rtc-card__avatar .rtc-badge-live { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 9px; padding: 2px 8px; /* Sobre el avatar el chip translúcido no se distinguía (se veía la foto por debajo). Fondo ROJO sólido + texto blanco + anillo del color de la card para que el badge se separe del avatar y siempre sea legible. */ background: var(--vivo); color: var(--sobre-acento); border-color: var(--vivo); box-shadow: 0 0 0 2px var(--azul-oscuro); white-space: nowrap; } .rtc-card__nombre { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; } .rtc-card__bio { color: var(--gris); font-size: 0.88rem; margin-top: 2px; } .rtc-card__plats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .rtc-plat { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); text-decoration: none; color: var(--blanco); font-size: 0.82rem; font-weight: 600; transition: border-color 0.2s, transform 0.15s; } .rtc-plat:hover, .rtc-plat:focus-visible { transform: translateY(-1px); border-color: var(--azul-borde); } .rtc-plat__ico { display: inline-flex; width: 18px; height: 18px; } .rtc-plat__ico svg { width: 18px; height: 18px; } .rtc-plat--twitch .rtc-plat__ico { color: var(--p-twitch); } .rtc-plat--youtube .rtc-plat__ico { color: var(--p-youtube); } .rtc-plat--tiktok .rtc-plat__ico { color: var(--p-tiktok); } .rtc-plat--facebook .rtc-plat__ico { color: var(--p-facebook); } .rtc-plat--kick .rtc-plat__ico { color: var(--p-kick); } .rtc-plat--instagram .rtc-plat__ico { color: var(--p-instagram); } .rtc-plat--x .rtc-plat__ico { color: var(--p-x); } .rtc-card__proxhead { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris); text-decoration: none; margin-bottom: 6px; transition: color 0.2s; } a.rtc-card__proxhead:hover, a.rtc-card__proxhead:focus-visible { color: var(--azul-claro); } .rtc-card__proxlist { list-style: none; display: flex; flex-direction: column; gap: 4px; } .rtc-card__proxlist li { display: flex; gap: 8px; font-size: 0.85rem; } .rtc-card__proxfecha { color: var(--azul-claro); font-weight: 600; white-space: nowrap; } .rtc-card__proxtit { color: var(--gris-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rtc-card__cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: 999px; background: var(--grad-azul); color: var(--sobre-acento); text-decoration: none; font-weight: 600; font-size: 0.92rem; } /* CTA sin destino: estado "Próximamente" (no un hueco mudo, no parece activo). */ .rtc-card__cta--pronto { background: var(--superficie-2); border: 1px solid var(--borde); color: var(--gris); cursor: default; } /* Tarjeta compacta: sin bio NI plataformas → menos altura, ritmo del grid sano. La cabecera (avatar + nombre) y el CTA bastan para no dejar la card "muerta". */ .rtc-card--compacta { gap: 0.7rem; } .rtc-card--compacta .rtc-card__head { align-items: center; } /* Cross-link al final del directorio: lleva al calendario (flujo entre superficies). */ .rtc-dir__cross { margin-top: 1.4rem; text-align: center; } .rtc-dir__crosslink { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; color: var(--azul-claro); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .rtc-dir__crosslink:hover, .rtc-dir__crosslink:focus-visible { text-decoration: underline; } /* --------------------------------------------------------- INFO DE COMUNIDAD --------------------------------------------------------- */ .rtc-info__bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-card); padding: 1.2rem; margin-bottom: 1.2rem; } .rtc-info__h2 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--azul-claro); } .rtc-info__p { color: var(--gris-suave); line-height: 1.7; } .rtc-info__p--lead { font-size: 1.02rem; color: var(--blanco); } /* "¿Qué es?": destacados con ícono — calendario / directorio / WhatsApp. */ .rtc-info__claves { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; } .rtc-info__clave { display: flex; align-items: center; gap: 12px; padding: 0.7rem 0.9rem; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); color: var(--gris-suave); font-size: 0.95rem; } .rtc-info__claveico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--azul-claro); } .rtc-info__claveico svg { width: 22px; height: 22px; } .rtc-info__clavetxt { line-height: 1.4; } /* Reglas: cada línea con un escudo-check azul + texto, en lugar de viñeta plana. */ .rtc-info__reglas { list-style: none; display: flex; flex-direction: column; gap: 12px; } .rtc-info__regla { display: flex; align-items: flex-start; gap: 12px; color: var(--gris-suave); line-height: 1.5; } .rtc-info__reglaico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: var(--azul); } .rtc-info__reglaico svg { width: 22px; height: 22px; } .rtc-info__reglatxt { line-height: 1.5; } .rtc-cta-wa { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 24px; border-radius: 999px; background: var(--ok); color: var(--verde-tinta); text-decoration: none; font-weight: 700; font-size: 1rem; } .rtc-cta-wa__ico { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; flex-shrink: 0; } .rtc-cta-wa__ico svg { width: 100%; height: 100%; } /* Cierre de la página Comunidad: CTA de WhatsApp (o fallback digno) + cross-link al directorio. Nunca un hueco mudo cuando whatsapp_url está vacío. */ .rtc-unirse { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; } .rtc-unirse__pronto { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--ok); border-radius: var(--radio); padding: 0.9rem 1.1rem; } .rtc-unirse__prontotit { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--blanco); } .rtc-unirse__prontosub { color: var(--gris-suave); font-size: 0.9rem; margin-top: 0.2rem; } .rtc-unirse__dir { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--azul-claro); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .rtc-unirse__dir:hover, .rtc-unirse__dir:focus-visible { text-decoration: underline; } /* --------------------------------------------------------- FOOTER --------------------------------------------------------- */ .rtc-foot { position: relative; z-index: 1; text-align: center; padding: 2rem 1rem; border-top: 1px solid var(--borde); font-size: 0.85rem; } /* --------------------------------------------------------- EMBED (shortcodes/widgets Elementor): el motor dentro de otra página. Hereda el tema; quita el sticky del top. --------------------------------------------------------- */ .rtc--embed { position: relative; } .rtc--embed .rtc-main { padding-top: 0.5rem; } /* --------------------------------------------------------- DESKTOP: el calendario muestra la rejilla semanal. --------------------------------------------------------- */ @media (min-width: 860px) { .rtc-sec__titulo { font-size: 2.3rem; } /* En escritorio el toggle y la zona vuelven a la misma fila. */ .rtc-cal__barra { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } /* auto-fit + columnas acotadas: el nº de columnas = nº de cards que caben, no un nº fijo. Con 2 streamers → 2 columnas centradas (justify-content:center en la base), sin 3ª columna vacía ni cards estiradas. */ .rtc-dir__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 360px)); } /* La vista semana (rejilla de 7 columnas) se define más abajo, junto al resto del bloque "CALENDARIO v0.7" para mantener juntas sus reglas. */ } /* En ≥1100px el auto-fit ya admite hasta 3 columnas (3×360px + gaps), y solo las crea si hay 3+ streamers — con 2 quedan 2 centradas, sin columna huérfana. No se fuerza repeat(3): eso es lo que dejaba el hueco con pocos streamers. */ /* --------------------------------------------------------- HERO con dato vivo (calendario): stats (streamers / en vivo). Sin titular de marketing (la jerarquía la lleva el h1 del calendario). El gap del .rtc-hero ordena prox + stats. --------------------------------------------------------- */ .rtc-hero__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; } .rtc-hero__stat { display: inline-flex; align-items: baseline; gap: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px; } .rtc-hero__statnum { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--blanco); } .rtc-hero__statlbl { color: var(--gris-suave); font-size: 0.82rem; } @keyframes rtc-latido { 0% { box-shadow: 0 0 0 0 rgba(var(--vivo-rgb), 0.5); } 70% { box-shadow: 0 0 0 7px rgba(var(--vivo-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--vivo-rgb), 0); } } /* --------------------------------------------------------- TARJETA DE STREAMER: acciones (perfil nativo + enlace externo) --------------------------------------------------------- */ .rtc-card__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: auto; } /* El "Ver perfil" reutiliza .rtc-card__cta (gradiente). El enlace externo es secundario. */ .rtc-card__ext { display: inline-flex; align-items: center; gap: 5px; min-height: var(--tap); padding: 0 14px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--gris-suave); text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: border-color 0.2s, color 0.2s; } .rtc-card__ext:hover, .rtc-card__ext:focus-visible { border-color: var(--azul); color: var(--blanco); } .rtc-card__extico { font-size: 0.95rem; line-height: 1; } .rtc-card__cta:focus-visible, .rtc-card__ext:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* --------------------------------------------------------- PERFIL PÚBLICO DEL STREAMER (single nativo) --------------------------------------------------------- */ .rtc-perfil__volver { margin-bottom: 1rem; } .rtc-perfil__volverlink { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); color: var(--azul-claro); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .rtc-perfil__volverlink:hover, .rtc-perfil__volverlink:focus-visible { text-decoration: underline; } .rtc-perfil { display: flex; flex-direction: column; gap: 1.2rem; } /* Cuerpo del perfil: en móvil una sola columna apilada; en ≥860px rejilla 2 col. */ .rtc-perfil__cuerpo { display: flex; flex-direction: column; gap: 1.2rem; } .rtc-perfil__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem 1.2rem; } .rtc-perfil__avatar { position: relative; width: 110px; height: 110px; border-radius: 50%; background: var(--grad-azul); padding: 3px; flex-shrink: 0; box-shadow: 0 8px 30px var(--azul-dim); } .rtc-perfil__avatar img, .rtc-perfil__ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; } .rtc-perfil__ini { background: var(--azul-oscuro); font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--azul-claro); } /* Jerarquía del hero: nombre = foco #1 (dominante); badge EN VIVO = acompañante debajo. */ .rtc-perfil__id { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; } .rtc-perfil__nombre { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1.05; color: var(--blanco); order: 1; } /* El badge queda subordinado al nombre (más pequeño, debajo). */ .rtc-perfil__id .rtc-badge-live { order: 2; } .rtc-perfil__bio { order: 3; } .rtc-perfil__bio { color: var(--gris-suave); font-size: 1rem; line-height: 1.5; max-width: 52ch; } .rtc-perfil__cta { display: flex; justify-content: center; } .rtc-perfil__cta .rtc-btn { padding: 0 32px; min-height: 50px; font-size: 1rem; } .rtc-perfil__bloque, .rtc-perfil__suscribir { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; } .rtc-perfil__h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--azul-claro); margin-bottom: 0.8rem; } .rtc-perfil__plats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .rtc-perfil__vacio { color: var(--gris); font-size: 0.95rem; } .rtc-perfil__prox { list-style: none; display: flex; flex-direction: column; gap: 8px; } .rtc-perfil__proxitem { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; background: var(--superficie-2); border: 1px solid var(--borde); border-left: 3px solid var(--azul); border-radius: var(--radio-sm); padding: 10px 14px; } .rtc-perfil__proxfecha { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--azul-claro); white-space: nowrap; } .rtc-perfil__proxtit { color: var(--gris-suave); font-size: 0.95rem; overflow-wrap: anywhere; } /* El bloque "Suscribe su calendario" del perfil reusa el componente `.rtc-suscribir` (misma jerarquía: badge+título, primario, WhatsApp, copiar fallback). Solo ajusta el margen al ir dentro de la rejilla del perfil. */ .rtc-perfil__suscribir { margin-top: 0; } /* 404 del perfil (shell oscuro, no el del tema de agencia). */ .rtc-404 { text-align: center; padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .rtc-404__cod { font-family: var(--font-head); font-weight: 700; font-size: 3.4rem; line-height: 1; background: var(--grad-azul); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rtc-404__tit { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: var(--blanco); } .rtc-404__sub { color: var(--gris-suave); max-width: 40ch; } .rtc-404 .rtc-btn { margin-top: 0.6rem; } /* --------------------------------------------------------- INFO COMUNIDAD: redes oficiales (lista de pills). Reutiliza .rtc-plat; --red es la variante neutra (acento azul en hover). --------------------------------------------------------- */ .rtc-info__redes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.6rem; } .rtc-plat--red .rtc-plat__ico { color: var(--azul-claro); } /* --------------------------------------------------------- FOOTER on-brand: nav + redes + WhatsApp + copyright. --------------------------------------------------------- */ .rtc-foot__in { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .rtc-foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; } .rtc-foot__navlink { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; color: var(--gris-suave); text-decoration: none; font-weight: 600; font-size: 0.9rem; border-radius: 999px; transition: color 0.2s, background 0.2s; } .rtc-foot__navlink:hover, .rtc-foot__navlink:focus-visible { color: var(--blanco); background: var(--azul-dim); } /* Acceso de streamers en el footer: misma familia, con contorno para leerse como acción (entrada al panel), no como una sección pública más. */ .rtc-foot__navlink--acceso { border: 1px solid var(--borde); color: var(--blanco); } .rtc-foot__navlink--acceso:hover, .rtc-foot__navlink--acceso:focus-visible { border-color: var(--azul); } .rtc-foot__redes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .rtc-foot__red { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--gris-suave); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: border-color 0.2s, color 0.2s, transform 0.15s; } .rtc-foot__red:hover, .rtc-foot__red:focus-visible { border-color: var(--azul-borde); color: var(--blanco); transform: translateY(-1px); } .rtc-foot__redico { display: inline-flex; width: 18px; height: 18px; } .rtc-foot__redico svg { width: 18px; height: 18px; } .rtc-foot__red--wa { border-color: rgba(var(--ok-rgb), 0.4); color: var(--ok); } .rtc-foot__red--wa:hover, .rtc-foot__red--wa:focus-visible { border-color: var(--ok); color: var(--ok); } .rtc-foot__copy { color: var(--gris); font-size: 0.85rem; } .rtc-foot__navlink:focus-visible, .rtc-foot__red:focus-visible, .rtc-perfil__volverlink:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } @media (min-width: 860px) { .rtc-perfil__head { flex-direction: row; text-align: left; align-items: center; gap: 1.4rem; padding: 1.8rem; } .rtc-perfil__id { align-items: flex-start; } .rtc-perfil__cta { justify-content: flex-start; } /* Cuerpo a 2 columnas: izquierda = "Dónde transmite" + "Suscribe su calendario"; derecha = "Próximos streams" (la lista más alta). align-items:start evita que las cards estiren su alto al de la columna contraria. */ .rtc-perfil__cuerpo { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "plats prox" "susc prox"; align-items: start; gap: 1.2rem; } .rtc-perfil__bloque--plats { grid-area: plats; } .rtc-perfil__bloque--prox { grid-area: prox; } .rtc-perfil__suscribir { grid-area: susc; } /* Si no hay plataformas, "Próximos" sigue a la derecha y "Suscribe" llena la izquierda. */ .rtc-perfil__cuerpo:not(:has(.rtc-perfil__bloque--plats)) { grid-template-areas: "susc prox"; } /* El bloque del perfil vive en una columna estrecha de la rejilla: anula el layout horizontal que `.rtc-suscribir` toma a ≥860px y mantén la pila vertical (cabecera arriba, acciones a ancho completo, copiar debajo). */ .rtc-perfil__suscribir.rtc-suscribir { display: flex; flex-direction: column; grid-template-columns: none; grid-template-areas: none; } .rtc-perfil__suscribir .rtc-suscribir__acciones { flex-direction: column; justify-content: flex-start; } .rtc-perfil__suscribir .rtc-suscribir__primario, .rtc-perfil__suscribir .rtc-suscribir__wa { width: 100%; } .rtc-perfil__suscribir .rtc-suscribir__copiar { justify-self: auto; } .rtc-foot__in { flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .rtc-foot__nav { justify-content: flex-start; } .rtc-foot__copy { width: 100%; text-align: center; order: 3; } } /* ========================================================= CALENDARIO v0.7 — vista SEMANA real, atajo HOY, filtros front. (UI inyectada por comunidad.js sobre el DOM ya renderizado.) Todo con tokens del tema oscuro; mobile-first; foco azul; ≥44px. ========================================================= */ /* --- Atajo "Hoy/Ahora" en la barra del calendario (botón secundario pill). --- */ .rtc-cal__hoybtn { display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 16px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .rtc-cal__hoybtn:hover, .rtc-cal__hoybtn:focus-visible { border-color: var(--azul); background: var(--azul-dim); } .rtc-cal__hoybtnico { color: var(--azul-claro); font-size: 0.7rem; line-height: 1; } .rtc-cal__hoybtn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* --- Pista "Hoy" junto a la cabecera del día/columna. --- */ .rtc-cal__hoy { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--azul-dim); border: 1px solid var(--azul-borde); color: var(--azul-claro); font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } /* --- BARRA DE FILTROS del calendario (debajo de .rtc-cal__barra). COMPACTA: el botón "Filtros · N" es lo único siempre visible; el panel (la card) solo aparece al desplegar. Contenedor = columna sin fondo, para que el calendario respire y el primer stream suba. --- */ .rtc-cal__filtros { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.9rem; } .rtc-cal__fgrupo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .rtc-cal__flabel { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris); } .rtc-cal__fpills { display: flex; flex-wrap: wrap; gap: 5px; } .rtc-cal__fpill { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--gris-suave); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; } .rtc-cal__fpill:hover { border-color: var(--azul-borde); color: var(--blanco); } .rtc-cal__fpill[aria-pressed="true"] { background: var(--grad-azul); border-color: transparent; color: var(--sobre-acento); } .rtc-cal__fpill:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-cal__fselect { min-height: var(--tap); min-width: 170px; max-width: 100%; padding: 0 12px; border-radius: var(--radio-sm); background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; } .rtc-cal__fselect:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; } .rtc-cal__fselect option { background: var(--azul-oscuro); color: var(--blanco); } .rtc-cal__limpiar { align-self: flex-start; min-height: var(--tap); padding: 0 16px; border-radius: 999px; background: transparent; border: 1px solid var(--borde); color: var(--azul-claro); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .rtc-cal__limpiar:hover { border-color: var(--azul); background: var(--azul-dim); } .rtc-cal__limpiar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* --- VISTA SEMANA (móvil-first): carril horizontal de columnas-día con scroll-snap. En desktop pasa a rejilla de 7 (ver @media 860px). --- */ .rtc-cal__lienzo[data-rtc-modo="semana"] { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; /* Pista de scroll discreta on-brand. */ scrollbar-color: var(--azul-borde) transparent; } .rtc-cal__lienzo[data-rtc-modo="semana"]::-webkit-scrollbar { height: 8px; } .rtc-cal__lienzo[data-rtc-modo="semana"]::-webkit-scrollbar-thumb { background: var(--azul-borde); border-radius: 999px; } .rtc-cal__col { flex: 0 0 78%; max-width: 320px; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .rtc-cal__col[data-rtc-hoy="1"] { border-color: var(--azul-borde); box-shadow: 0 0 0 1px var(--azul-borde) inset; } .rtc-cal__col:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-cal__colhead { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); } .rtc-cal__coldia { font-family: var(--font-head); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--azul-claro); } .rtc-cal__col[data-rtc-hoy="1"] .rtc-cal__coldia { color: var(--blanco); } .rtc-cal__colvacio { color: var(--gris); font-size: 0.82rem; padding: 0.4rem 0; } .rtc-cal__collista { list-style: none; display: flex; flex-direction: column; gap: 8px; } .rtc-cal__colitem { display: flex; flex-direction: column; gap: 5px; } /* Evento COMPACTO (vista semana): hora · título · meta apilados. */ .rtc-evc { display: flex; flex-direction: column; gap: 3px; background: var(--superficie-2); border: 1px solid var(--borde); border-left: 3px solid var(--azul); border-radius: var(--radio-sm); padding: 8px 10px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .rtc-evc:hover, .rtc-evc:focus-visible { transform: translateY(-1px); border-color: var(--azul-borde); box-shadow: var(--sombra-hover); } .rtc-evc:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-evc--en_vivo { border-left-color: var(--vivo); } .rtc-evc--finalizado { opacity: 0.6; } .rtc-evc--cancelado { opacity: 0.55; text-decoration: line-through; } .rtc-evc__hora { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--blanco); white-space: nowrap; } .rtc-evc__titulo { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; } .rtc-evc__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-size: 0.74rem; color: var(--gris); } /* En semana las acciones (Avísame/Compartir) son compactas para no romper la columna estrecha: el texto se oculta y queda el ícono (sigue accesible por aria-label / aria-haspopup). En agenda permanecen completas. */ .rtc-cal__lienzo[data-rtc-modo="semana"] .rtc-ev__acciones { gap: 6px; } .rtc-cal__lienzo[data-rtc-modo="semana"] .rtc-acc { padding: 0 10px; min-height: 38px; } .rtc-cal__lienzo[data-rtc-modo="semana"] .rtc-acc__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- BÚSQUEDA + FILTROS del DIRECTORIO (inyectados por JS). --- */ .rtc-dir__filtros { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.2rem; padding: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .rtc-dir__buscar { display: flex; flex-direction: column; gap: 0.4rem; } .rtc-dir__buscarlbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris); } .rtc-dir__input { width: 100%; min-height: var(--tap); padding: 0 14px; border-radius: var(--radio-sm); background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font-family: var(--font-body); font-size: 0.95rem; } .rtc-dir__input::placeholder { color: var(--gris); } .rtc-dir__input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; } .rtc-dir__chips { display: flex; flex-wrap: wrap; gap: 6px; } .rtc-dir__chip { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--gris-suave); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; } .rtc-dir__chip:hover { border-color: var(--azul-borde); color: var(--blanco); } .rtc-dir__chip[aria-pressed="true"] { background: var(--grad-azul); border-color: transparent; color: var(--sobre-acento); } .rtc-dir__chip:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* Toggle "En vivo": usa el rojo semántico SOLO cuando está activo. */ .rtc-dir__chiplive { color: var(--vivo); font-size: 0.7rem; line-height: 1; } .rtc-dir__chip--live.is-on, .rtc-dir__chip--live[aria-pressed="true"] { background: rgba(var(--vivo-rgb), 0.14); border-color: rgba(var(--vivo-rgb), 0.4); color: var(--vivo); } .rtc-dir__chip--live.is-on .rtc-dir__chiplive, .rtc-dir__chip--live[aria-pressed="true"] .rtc-dir__chiplive { color: var(--vivo); } /* Toggle "Jugando ahora" (SPEC 0011): violeta semántico SOLO cuando está activo. */ .rtc-dir__chipjugando { color: var(--jugando); font-size: 0.66rem; line-height: 1; } .rtc-dir__chip--jugando.is-on, .rtc-dir__chip--jugando[aria-pressed="true"] { background: rgba(var(--jugando-rgb), 0.16); border-color: rgba(var(--jugando-rgb), 0.45); color: var(--jugando); } .rtc-dir__chip--jugando.is-on .rtc-dir__chipjugando, .rtc-dir__chip--jugando[aria-pressed="true"] .rtc-dir__chipjugando { color: var(--jugando); } /* Filtro por modo — select temado. */ .rtc-dir__modo { display: flex; flex-direction: column; gap: 4px; } .rtc-dir__modosel { min-height: var(--tap); padding: 0 12px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font: inherit; } .rtc-dir__modosel:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* Mensaje "sin resultados" del directorio. */ .rtc-dir__sinres { color: var(--gris-suave); font-size: 0.95rem; padding: 1.2rem 0; text-align: center; } .rtc-dir__limpiar { display: inline-flex; align-items: center; min-height: 38px; margin-left: 6px; padding: 0 14px; border-radius: 999px; background: transparent; border: 1px solid var(--borde); color: var(--azul-claro); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .rtc-dir__limpiar:hover { border-color: var(--azul); background: var(--azul-dim); } .rtc-dir__limpiar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* ========================================================= SKELETONS DE CARGA (v0.7.2) — placeholders fantasma on-brand mientras resuelve /streams. Superficie-2 + shimmer azul tenue que recorre; respeta prefers-reduced-motion (estático). Decorativos (aria-hidden por JS); el lienzo conserva su texto accesible. ========================================================= */ /* Texto solo para lectores de pantalla (el skeleton es visual). */ .rtc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Pieza base: superficie tenue con shimmer azul que recorre. Todas las formas fantasma comparten este fondo via .rtc-skel__* (heredan el ::after). */ .rtc-skel__diahead, .rtc-skel__hora, .rtc-skel__titulo, .rtc-skel__meta, .rtc-skel__ftoggle { position: relative; display: block; overflow: hidden; background: var(--superficie-2); border-radius: var(--radio-sm); } .rtc-skel__diahead::after, .rtc-skel__hora::after, .rtc-skel__titulo::after, .rtc-skel__meta::after, .rtc-skel__ftoggle::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent 0%, var(--azul-dim) 50%, transparent 100% ); animation: rtc-shimmer 1.4s ease-in-out infinite; } @keyframes rtc-shimmer { 100% { transform: translateX(100%); } } /* Skeleton del LIENZO: días fantasma con filas (hora + título + meta). */ .rtc-skel__dia { margin-bottom: 1.4rem; } .rtc-skel__diahead { width: 42%; height: 0.95rem; margin-bottom: 12px; } .rtc-skel__lista { list-style: none; display: flex; flex-direction: column; gap: 10px; } .rtc-skel__fila { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .rtc-skel__hora { flex: 0 0 auto; width: 46px; height: 1.1rem; } .rtc-skel__cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .rtc-skel__titulo { width: 70%; height: 0.95rem; } .rtc-skel__meta { width: 45%; height: 0.7rem; } /* Skeleton de la BARRA DE FILTROS: solo reserva el botón "Filtros" compacto (el panel arranca colapsado en todos los tamaños → sin CLS al aparecer). */ .rtc-cal__filtros-skel { display: flex; margin-bottom: 0.9rem; } .rtc-skel__ftoggle { width: 116px; height: var(--tap); border-radius: 999px; } /* ========================================================= FILTROS COLAPSABLES EN TODOS LOS TAMAÑOS (v0.7.5) — botón "Filtros · N". El panel (STREAMER + PLATAFORMA + TIPO + Limpiar) arranca COLAPSADO en móvil y desktop; el botón lo despliega como card. Footprint compacto para que el calendario respire. Tokens del tema; foco azul; tap-target ≥44px aunque sea compacto. ========================================================= */ /* Botón "Filtros · N": siempre visible. Pill secundaria compacta con tap-target real ≥44px (min-height) aunque visualmente sea pequeño. */ .rtc-cal__ftoggle { display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 15px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .rtc-cal__ftoggle:hover { border-color: var(--azul-borde); } .rtc-cal__ftoggle:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-cal__ftoggle.is-activo { border-color: var(--azul-borde); background: var(--azul-dim); } .rtc-cal__ftoggleico { color: var(--azul-claro); font-size: 0.8rem; line-height: 1; } .rtc-cal__fcontador { color: var(--azul-claro); font-weight: 700; font-size: 0.82rem; } /* Panel colapsable: oculto hasta is-open (en CUALQUIER viewport). Al abrirse es la card (superficie + borde) que agrupa los filtros. */ .rtc-cal__fpanel { flex-wrap: wrap; align-items: flex-end; gap: 0.7rem 1rem; width: 100%; padding: 0.8rem 0.9rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); } .rtc-cal__fpanel[data-rtc-colapsable] { display: none; } .rtc-cal__fpanel[data-rtc-colapsable].is-open { display: flex; } /* --- DESKTOP: la vista semana pasa de carril a rejilla de 7 columnas. --- */ @media (min-width: 860px) { .rtc-cal__lienzo[data-rtc-modo="semana"] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; overflow-x: visible; scroll-snap-type: none; } .rtc-cal__col { flex: initial; max-width: none; padding: 8px; } .rtc-cal__coldia { font-size: 0.8rem; } } /* El colapso de filtros es UNIFICADO (botón "Filtros · N" en todos los tamaños): ya no hay @media que fuerce el panel visible en desktop. */ /* --------------------------------------------------------- CUENTAS REGRESIVAS (módulo countdown del motor). Etiqueta discreta y on-brand que el JS actualiza cada segundo. Hora en Rajdhani (números legibles); acento azul; el live usa --vivo. Mobile-first, solo tokens del tema, no interactiva. --------------------------------------------------------- */ .rtc-cd { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; /* MM:SS no "salta" al tickear. */ white-space: nowrap; background: var(--azul-dim); color: var(--azul-claro); border: 1px solid var(--azul-borde); } /* Lejos (>24 h) / próximo (1–24 h): acento azul calmo (heredado). --prox no necesita override: el azul base del .rtc-cd ya lo cubre. */ .rtc-cd--lejos { opacity: 0.92; } /* Urgente (<1 h, MM:SS / "Empezando…"): sube el contraste y un pulso sutil. */ .rtc-cd--urgente { color: var(--blanco); background: var(--azul-dim); border-color: var(--azul); animation: rtc-cd-pulso 1.6s ease-in-out infinite; } /* En vivo: lenguaje "EN VIVO" (rojo --vivo, único uso semántico). */ .rtc-cd--vivo { color: var(--vivo); background: rgba(var(--vivo-rgb), 0.14); border-color: rgba(var(--vivo-rgb), 0.4); } .rtc-cd--vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 0 rgba(var(--vivo-rgb), 0.5); animation: rtc-latido 1.6s ease-out infinite; } /* Finalizado / cancelado: apagado (rara vez visible — solo si cruza en pantalla). */ .rtc-cd--fin, .rtc-cd--cancelado { color: var(--gris); background: var(--superficie-2); border-color: var(--borde); } @keyframes rtc-cd-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } /* HERO "Próximo stream": primer renglón informativo, con su cuenta regresiva. El espaciado vertical lo da el gap del .rtc-hero (no margin propio). */ .rtc-hero__prox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--gris-suave); font-size: 0.92rem; } .rtc-hero__proxlbl { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; color: var(--azul-claro); } .rtc-hero__proxquien { color: var(--blanco); font-weight: 600; overflow-wrap: anywhere; } .rtc-cd--hero { font-size: 0.82rem; padding: 2px 11px; } /* PERFIL: la etiqueta relativa vive en su propia celda del grid del item (el grid pasa a 3 columnas: fecha | título | countdown alineado al final). */ .rtc-perfil__proxitem { grid-template-columns: auto minmax(0, 1fr) auto; } .rtc-perfil__proxcd { justify-self: end; } /* El PRÓXIMO (primero) se destaca con un poco más de peso/borde. */ .rtc-perfil__proxitem--primero { border-left-color: var(--azul-claro); } .rtc-perfil__proxitem--primero .rtc-perfil__proxfecha { color: var(--blanco); } /* En móvil estrecho el chip baja a una segunda fila para no comprimir el título. */ @media (max-width: 460px) { .rtc-perfil__proxitem { grid-template-columns: auto minmax(0, 1fr); } .rtc-perfil__proxcd { grid-column: 1 / -1; justify-self: start; } } /* ========================================================= ESPÍRITUS / SPRITES (SPEC 0008 · presentación v2 SPEC 0016) Cromo `.rtc-esp` reutilizable (tracker · perfil · panel · página por streamer). v2: el RECUADRO se colorea por VARIANTE (--marco lo fija .rtc-esp--v-*), y la RAREZA es una etiqueta NO cromática (.rtc-esp__rareza). Estado por LUZ: --tengo (marco sólido + halo + check) vs --falta (grayscale + opacidad + marco dashed + círculo). Color solo por tokens (bloques [data-tema]). ========================================================= */ /* Cromo base: cuadrado, marco de VARIANTE, figura, estado (check/círculo), nombre y etiqueta de rareza. --marco por defecto = estándar; .rtc-esp--v-* lo reasigna. */ .rtc-esp { --marco: var(--var-estandar); --marco-rgb: var(--var-estandar-rgb); position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; } /* v2 (R2): el color del recuadro depende de la VARIANTE, no de la rareza. */ .rtc-esp--v-estandar { --marco: var(--var-estandar); --marco-rgb: var(--var-estandar-rgb); } .rtc-esp--v-gold { --marco: var(--var-gold); --marco-rgb: var(--var-gold-rgb); } .rtc-esp--v-gummy { --marco: var(--var-gummy); --marco-rgb: var(--var-gummy-rgb); } .rtc-esp--v-galaxy { --marco: var(--var-galaxy); --marco-rgb: var(--var-galaxy-rgb); } .rtc-esp__fig { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radio-sm); background: var(--superficie-2); border: 2px solid rgba(var(--marco-rgb), 0.5); overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Marco/halo de VARIANTE (capa decorativa sobre la figura). */ .rtc-esp__marco { position: absolute; inset: 0; border-radius: var(--radio-sm); pointer-events: none; z-index: 2; } .rtc-esp__img { width: 100%; height: 100%; object-fit: contain; display: block; } .rtc-esp__ph { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: rgba(var(--marco-rgb), 0.85); } /* Insignia de estado (check / aspa) en la esquina. */ .rtc-esp__estado { position: absolute; top: 4px; right: 4px; z-index: 3; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--negro); } .rtc-esp__estado svg { width: 15px; height: 15px; } .rtc-esp__nombre { font-size: 0.78rem; line-height: 1.15; text-align: center; color: var(--texto-suave); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Estado TENGO: color + marco sólido de VARIANTE + halo + check verde. */ .rtc-esp--tengo .rtc-esp__marco { border: 3px solid var(--marco); box-shadow: 0 0 0 1px rgba(var(--marco-rgb), 0.35), 0 0 16px rgba(var(--marco-rgb), 0.28); } .rtc-esp--tengo .rtc-esp__estado { color: var(--ok); } .rtc-esp--tengo .rtc-esp__nombre { color: var(--texto); } /* Estado FALTA: grayscale + opacidad + marco dashed atenuado + círculo vacío. */ .rtc-esp--falta .rtc-esp__fig { border-color: var(--borde); } .rtc-esp--falta .rtc-esp__img { filter: grayscale(1); opacity: var(--esp-falta-opacidad); } .rtc-esp--falta .rtc-esp__ph { color: var(--gris); opacity: var(--esp-falta-opacidad); } .rtc-esp--falta .rtc-esp__marco { border: 2px dashed var(--gris); opacity: 0.7; } .rtc-esp--falta .rtc-esp__estado { color: var(--gris); } /* Variante galaxy: refuerzo del morado con el gradiente de fondo (el color del marco ya lo da --marco vía .rtc-esp--v-galaxy). El tinte del nombre por variante se retiró en v2 (el recuadro ya comunica la variante). */ .rtc-esp--v-galaxy.rtc-esp--tengo .rtc-esp__fig { background-image: var(--grad-galaxy); background-blend-mode: overlay; } /* Rareza como ETIQUETA no cromática (R3): tercera línea del cromo, tras el nombre. MAYÚSCULAS, gris neutro (la rareza también va en el aria-label del cromo → aria-hidden). NADA de chip/dot de color (evita el choque galaxy-morado / épica-morada). */ .rtc-esp__rareza { /* MAYOR-1: legible AA en ambos temas. ~11.5px + --gris-suave (oled #bccce6 ~11:1). NO se atenúa en "me falta" (la rareza es un canal de texto, no debe caer bajo AA). */ font: 600 0.72rem/1.1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris-suave); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Rejilla de cromos (tracker + perfil) --- */ .rtc-espgrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; margin: 0; padding: 0; } .rtc-espgrid--perfil { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } .rtc-espgrid__item { margin: 0; } .rtc-espgrid__vacio { color: var(--texto-suave); text-align: center; padding: 24px 0; } /* Botón-toggle del tracker: sin estilo de botón, tap-target ≥44px por la figura. */ .rtc-esp-toggle { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; border-radius: var(--radio-sm); } .rtc-esp-toggle:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; } /* --- Layout agrupado por BASE (matriz base × variante, SPEC 0016 §B) --- Cada grupo = un espíritu base con sus 4 slots (estandar/gold/gummy/galaxy). Una variante ausente = celda vacía, para alinear columnas entre grupos. */ .rtc-espgrupos { display: grid; gap: 22px; margin: 0; padding: 0; } @media (min-width: 720px) { .rtc-espgrupos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px 24px; } } .rtc-espgrupo { margin: 0; } /* Flujo COLUMN-MAJOR del tracker (solo `data-rtc-esp-grid`; el selector del intercambio `.rtc-espsel-grid` conserva su rejilla por filas en 1 columna dentro del

). CSS multicolumna: en desktop llena la columna IZQUIERDA de arriba a abajo y recién después la derecha (base 1, base 2, base 3… hacia abajo). En móvil (<720px) queda en 1 columna (flujo de bloque). `break-inside: avoid` evita que un grupo se parta entre columnas; se re-balancea solo al filtrar (grupos ocultos). */ .rtc-espgrupos[data-rtc-esp-grid] { display: block; gap: 0; } .rtc-espgrupos[data-rtc-esp-grid] .rtc-espgrupo { break-inside: avoid; margin-bottom: 22px; } .rtc-espgrupos[data-rtc-esp-grid] .rtc-espgrupo:last-child { margin-bottom: 0; } @media (min-width: 720px) { .rtc-espgrupos[data-rtc-esp-grid] { columns: 2; column-gap: 24px; } } .rtc-espgrupo__head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borde); font: 700 1.05rem var(--font-head); color: var(--texto); } .rtc-espgrupo__n { font: 600 0.85rem var(--font-head); color: var(--gris); } .rtc-espgrupo__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; } @media (min-width: 414px) { .rtc-espgrupo__grid { gap: 10px; } } /* Celda vacía: reserva la columna de una variante ausente (sin borde ni contenido). */ .rtc-espgrupo__slot--vacio { visibility: hidden; } /* --- Barra de acciones flotante en móvil (SPEC 0016 §D + MAYOR-2) --- Fija al borde inferior del viewport durante el marcado; estática y centrada en ≥720px. El contenedor del tracker lleva padding-bottom para que la barra no tape el último grupo. */ .rtc-espbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; background: var(--top-bg); backdrop-filter: blur(8px); border-top: 1px solid var(--borde); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } .rtc-espbar .rtc-btn { min-height: var(--tap); } /* MAYOR-3: "Guardar mi tracker" es la acción primaria única y va PRIMERO. */ .rtc-espbar__guardar { order: -1; } .rtc-espbar__hint { order: 1; flex-basis: 100%; margin: 0; text-align: center; font-size: 0.8rem; color: var(--texto-suave); } .rtc-esptracker__guardomsg { order: 2; flex-basis: 100%; text-align: center; color: var(--texto-suave); font-size: 0.85rem; } .rtc-esptracker__guardomsg:empty { display: none; } /* Deja aire bajo el contenido para la barra flotante (móvil). */ @media (max-width: 719px) { .rtc-esptracker, .rtc-espst { padding-bottom: 132px; } } @media (min-width: 720px) { .rtc-espbar { position: static; background: none; border: 0; backdrop-filter: none; justify-content: center; } } /* --- Vista pública /espiritus (tracker) --- */ .rtc-esptracker { max-width: 1000px; margin: 0 auto; padding: 20px 16px 64px; } .rtc-esptracker__head { text-align: center; margin-bottom: 20px; } .rtc-esptracker__titulo { font-family: var(--font-head); font-size: 1.9rem; color: var(--texto); } .rtc-esptracker__sub { color: var(--texto-suave); max-width: 60ch; margin: 8px auto 0; } .rtc-esptracker__disc { display: inline-block; margin-top: 12px; padding: 4px 12px; border: 1px solid var(--borde); border-radius: 999px; font-size: 0.8rem; color: var(--texto-suave); } .rtc-esptracker__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .rtc-esptracker__prog { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--azul); } /* Micro-celebración al completar la colección (SPEC 0016 §D + MENOR-4): el contador se realza como un badge (píldora con glow del token de acierto) además del texto. */ .rtc-esptracker__prog.is-completo { color: var(--ok); padding: 4px 14px; border-radius: 999px; background: rgba(var(--ok-rgb), 0.12); box-shadow: 0 0 0 1px rgba(var(--ok-rgb), 0.5), 0 0 18px rgba(var(--ok-rgb), 0.35); animation: rtc-esp-celebra 0.6s ease-out; } .rtc-esptracker__prog.is-completo::after { content: " · ¡Colección completa!"; color: var(--var-gold); font-weight: 700; } @keyframes rtc-esp-celebra { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 60% { transform: scale(0.98); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .rtc-esptracker__prog.is-completo { animation: none; } } .rtc-esptracker__atajos { display: flex; gap: 8px; } /* Filtros colapsables (patrón calendario). */ .rtc-espfiltros { margin-bottom: 16px; } .rtc-espfiltros__toggle { min-height: var(--tap); padding: 10px 16px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); color: var(--texto); font: 600 0.95rem var(--font-body); cursor: pointer; } .rtc-espfiltros__toggle:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-espfiltros__n { color: var(--azul); } .rtc-espfiltros__panel { margin-top: 12px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); display: grid; gap: 16px; } .rtc-espfiltros__grupo { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .rtc-espfiltros__leg { font-family: var(--font-head); font-weight: 600; color: var(--texto); width: 100%; margin-bottom: 4px; } .rtc-espfiltros__op { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--texto-suave); cursor: pointer; } /* MENOR-1 (R4): muestra de color por variante en el filtro (variante=color, rareza=texto). */ .rtc-espfiltros__sw { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; border: 1px solid var(--borde); } .rtc-espfiltros__sw--estandar { background: var(--var-estandar); } .rtc-espfiltros__sw--gold { background: var(--var-gold); } .rtc-espfiltros__sw--gummy { background: var(--var-gummy); } .rtc-espfiltros__sw--galaxy { background: var(--var-galaxy); } /* Mensaje de error de la descarga (aria-live): la imagen se compone en memoria y se baja en un paso, así que no hay preview; solo se muestra texto si falla toBlob/share. */ .rtc-espbar__err { order: 3; flex-basis: 100%; margin: 0; text-align: center; font-size: 0.85rem; color: var(--error); } .rtc-espbar__err:empty { display: none; } /* --- Bloque "Espíritus que tiene" en el perfil público --- */ .rtc-perfil__bloque--esp .rtc-espgrid { margin-top: 4px; } .rtc-perfil__espcompartir { margin-top: 14px; } .rtc-perfil__espnota { margin-top: 10px; font-size: 0.8rem; color: var(--texto-suave); } .rtc-perfil__espmas { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-weight: 600; color: var(--azul); } /* --- Página por streamer /streamer/{slug}/espiritus (SPEC 0016 §E) --- */ .rtc-espst { max-width: 1000px; margin: 0 auto; padding: 16px 16px 64px; } .rtc-espst__volver { margin-bottom: 12px; } .rtc-espst__volverlink { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-suave); min-height: var(--tap); } .rtc-espst__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .rtc-espst__avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; } .rtc-espst__avatar img { width: 100%; height: 100%; object-fit: cover; } .rtc-espst__ini { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--azul); } .rtc-espst__nombre { font-family: var(--font-head); font-size: 1.5rem; color: var(--texto); margin: 0; } .rtc-espst__cont { color: var(--azul); font-family: var(--font-head); font-weight: 600; margin: 2px 0 0; } .rtc-espst__disc { display: inline-block; margin: 12px 0 20px; padding: 4px 12px; border: 1px solid var(--borde); border-radius: 999px; font-size: 0.8rem; color: var(--texto-suave); } /* Bloque de contacto PROMINENTE (el corazón del feature). */ .rtc-espst__contacto { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--azul); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 24px; } .rtc-espst__contacto-tit { font-family: var(--font-head); font-size: 1.1rem; color: var(--texto); margin: 0 0 4px; } .rtc-espst__contacto-sub { color: var(--texto-suave); margin: 0 0 12px; } .rtc-espst__redes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; } /* --- Selector de espíritus en el panel (reusa .rtc-modosel; cromo dentro del chip) --- */ .rtc-espsel { gap: 10px; } .rtc-espsel__chip { width: 88px; padding: 6px; align-items: stretch; } .rtc-espsel__cont { font-weight: 600; color: var(--azul); } /* --- Fila del catálogo de espíritus (admin) --- */ .rtc-esp-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); } .rtc-esp-fila .rtc-campo__in { flex: 1 1 120px; min-width: 0; } .rtc-esp-fila__foto { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: 1px dashed var(--borde); border-radius: var(--radio-sm); color: var(--texto-suave); cursor: pointer; white-space: nowrap; } .rtc-esp-fila__reord { display: inline-flex; gap: 4px; } /* --- Accesibilidad: respeta "reduce motion". --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Skeletons: sin shimmer animado → placeholder estático (superficie tenue). */ .rtc-skel__diahead::after, .rtc-skel__hora::after, .rtc-skel__titulo::after, .rtc-skel__meta::after, .rtc-skel__ftoggle::after { display: none !important; } } /* ========================================================= LOBBY (SPEC 0010) — apartar lugar en un stream Bloque dentro de la ficha del evento. Solo tokens del tema (cero hex suelto). ========================================================= */ .rtc-lobby { margin: 8px 0 2px; padding: 12px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); } .rtc-lobby__tit { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; color: var(--blanco); } /* Barra de cupo */ .rtc-lobby__cupo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rtc-lobby__barra { position: relative; flex: 1 1 120px; height: 8px; min-width: 120px; /* m4 (uxui): track de VACÍO neutro (no azul-dim) para que 0 inscritos no parezca medio lleno; el fill --azul crece desde 0%. Borde sutil delimita el track completo. */ background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; } .rtc-lobby__barrafill { display: block; height: 100%; background: var(--azul); border-radius: 999px; transition: width 0.3s ease; } .rtc-lobby__cuenta { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--blanco); } .rtc-lobby__estado { font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .rtc-lobby__estado--lleno { color: var(--azul-claro); background: var(--azul-dim); } .rtc-lobby__estado--cerrado { /* Lleno/cerrado NO es un error → tinte NEUTRO (el rojo se reserva a errores reales). */ color: var(--texto-suave); background: var(--superficie); border: 1px solid var(--borde); } /* Chips de inscritos públicos (Epic + posición); NUNCA WhatsApp */ .rtc-lobby__lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .rtc-lobby__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; font-size: 0.82rem; } .rtc-lobby__chippos { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--azul-claro); } .rtc-lobby__chipepic { color: var(--texto); overflow-wrap: anywhere; } .rtc-lobby__espera { margin: 8px 0 0; font-size: 0.82rem; color: var(--texto-suave); } /* M1 (uxui) — aviso de "cupo lleno → lista de espera" sobre el form/acción. */ .rtc-lobby__llenoaviso { margin: 10px 0 6px; padding: 8px 10px; border-radius: var(--radio-sm); background: var(--superficie-2); border: 1px solid var(--azul-borde); color: var(--texto); font-size: 0.85rem; font-weight: 600; } /* Empty-state con gancho cuando aún no hay inscritos */ .rtc-lobby__vacio { margin: 10px 0 0; font-size: 0.85rem; color: var(--gris); } /* Franja full-width de lobbies bajo la rejilla SEMANA (desktop). En el grid de 7 columnas ocupa toda la fila (grid-column:1/-1); las tarjetas de lobby van a un ancho de lectura cómodo, no embutidas en la columna del día (MAYOR-1). */ .rtc-cal__lobbies { margin-top: 4px; } .rtc-cal__lobbieshead { margin: 8px 0; font-size: 1rem; font-weight: 600; color: var(--blanco); } .rtc-cal__lobbieswrap { display: grid; gap: 12px; grid-template-columns: 1fr; } .rtc-cal__lobbyitem { padding: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); } .rtc-cal__lobbytit { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--blanco); } .rtc-cal__lobbysub { margin: 2px 0 0; font-size: 0.82rem; color: var(--texto-suave); } .rtc-cal__lobbyitem .rtc-lobby { margin: 10px 0 0; background: var(--superficie-2); } @media (min-width: 860px) { .rtc-cal__lienzo[data-rtc-modo="semana"] .rtc-cal__lobbies { grid-column: 1 / -1; } /* Varias tarjetas lado a lado, cada una a ancho cómodo para el formulario. */ .rtc-cal__lobbieswrap { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } /* Formulario de inscripción */ .rtc-lobby__form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .rtc-lobby__campo { display: flex; flex-direction: column; gap: 4px; } .rtc-lobby__lbl { font-size: 0.85rem; font-weight: 600; color: var(--blanco); } .rtc-lobby__in { min-height: var(--tap); padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); color: var(--texto); font: inherit; } .rtc-lobby__in:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul-borde); } .rtc-lobby__ayuda { font-size: 0.78rem; color: var(--texto-suave); } /* Honeypot: fuera de vista, accesible-oculto (no display:none, para que un bot lo vea) */ .rtc-lobby__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Consentimiento (reusable por otros formularios de inscripción) */ .rtc-consent { display: flex; align-items: flex-start; gap: 8px; } .rtc-consent__chk { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--azul); } .rtc-consent__lbl { font-size: 0.82rem; line-height: 1.45; color: var(--texto-suave); } .rtc-consent__link { color: var(--azul-claro); text-decoration: underline; } .rtc-consent__link:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* Botones del lobby (áreas táctiles ≥44px) */ .rtc-btnlobby { min-height: var(--tap); padding: 10px 16px; border-radius: var(--radio-sm); border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; } .rtc-btnlobby--enviar { /* CTA primario canónico (igual que "Suscribir calendario"): gradiente + sobre-acento. AA en ambos temas (antes usaba --azul-oscuro, token de superficie que invierte → ~2.3:1). */ background: var(--grad); color: var(--sobre-acento); } .rtc-btnlobby--enviar:hover { filter: brightness(1.06); } .rtc-btnlobby--enviar[disabled] { opacity: 0.6; cursor: default; } .rtc-btnlobby--cancelar { background: transparent; color: var(--error); border-color: var(--borde); } .rtc-btnlobby:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-lobby__miestado { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .rtc-lobby__ok { margin: 0; color: var(--ok); font-weight: 600; } .rtc-lobby__cerradomsg { margin: 10px 0 0; color: var(--texto-suave); } /* Mensaje de estado (éxito / error) */ .rtc-lobby__msg { margin: 10px 0 0; font-size: 0.85rem; font-weight: 600; } .rtc-lobby__msg--ok { color: var(--ok); } .rtc-lobby__msg--error { color: var(--error); } /* ========================================================= AVISO DE PRIVACIDAD (SPEC 0017) — vista /privacidad Reusa .rtc-info (tipografía). Bloque propio .rtc-aviso-priv (distinto del componente .rtc-aviso de recordatorios, para no colisionar). ========================================================= */ .rtc-aviso-priv__bloque--destacado { padding: 14px 16px; background: var(--azul-dim); border: 1px solid var(--azul-borde); border-radius: var(--radio-sm); } .rtc-aviso-priv__contacto { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--azul-claro); text-decoration: underline; font-weight: 600; } .rtc-aviso-priv__fecha { color: var(--texto-suave); font-size: 0.85rem; } /* Sello "BORRADOR — pendiente de aprobación" */ .rtc-sello { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radio-sm); font-size: 0.88rem; font-weight: 600; } .rtc-sello--borrador { color: var(--blanco); background: rgba(var(--error-rgb), 0.12); border: 1px dashed var(--error); } .rtc-sello__ico { flex: 0 0 auto; color: var(--error); } .rtc-sello__txt { line-height: 1.45; } /* ========================================================= TORNEOS (SPEC 0013) y SORTEOS (SPEC 0014) Mobile-first, BEM, solo tokens. Reutiliza .rtc-lobby__* (cupo/form/consent/chip) y .rtc-modlobby (panel del dueño). Componentes nuevos: .rtc-torneo/.rtc-sorteo, .rtc-premios, .rtc-podio, .rtc-estado, .rtc-nota-com, .rtc-modochip, .rtc-requisitos, .rtc-modganadores, .rtc-sortear, .rtc-histsorteo, .rtc-btnmini. ========================================================= */ .rtc-eventos { max-width: 960px; margin: 0 auto; padding: 8px 0 40px; } .rtc-eventos__lista { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; } @media (min-width: 760px) { .rtc-eventos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rtc-eventos__cargando, .rtc-eventos__vacio { color: var(--texto-suave); text-align: center; padding: 28px 12px; } .rtc-eventos__h3 { font-family: var(--font-head); font-size: 0.92rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--texto-suave); margin: 14px 0 8px; } .rtc-eventos__fecha, .rtc-eventos__org { color: var(--texto-suave); font-size: 0.9rem; } .rtc-torneo, .rtc-sorteo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-card); padding: 16px 16px 18px; display: flex; flex-direction: column; } .rtc-torneo__titfila { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .rtc-torneo__tit, .rtc-sorteo__tit { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--texto); margin: 0; line-height: 1.2; } .rtc-torneo__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; } .rtc-sorteo__desc { color: var(--texto-suave); margin: 10px 0 0; line-height: 1.5; } /* Chip de modo del torneo. */ .rtc-modochip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--azul-dim); border: 1px solid var(--azul-borde); color: var(--azul-claro); font-size: 0.82rem; font-weight: 600; } /* Badge de estado. */ .rtc-estado { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid transparent; white-space: nowrap; } .rtc-estado--abierto { color: var(--ok); background: rgba(var(--ok-rgb), 0.14); border-color: rgba(var(--ok-rgb), 0.45); } /* TEMA (guardian-tema): en claro el verde --ok sobre su tinte .14 cae a 3.47:1 (< AA). Se sirve como RELLENO SÓLIDO con texto --verde-tinta (mismo par AA del CTA WhatsApp). */ [data-tema="claro"] .rtc-estado--abierto { color: var(--verde-tinta); background: var(--ok); border-color: var(--ok); } .rtc-estado--cerrado { color: var(--texto-suave); background: var(--superficie-2); border-color: var(--borde); } .rtc-estado--curso { color: var(--jugando); background: rgba(var(--jugando-rgb), 0.16); border-color: rgba(var(--jugando-rgb), 0.45); } .rtc-estado--fin { color: var(--azul-claro); background: var(--azul-dim); border-color: var(--azul-borde); } .rtc-estado--lleno { color: var(--texto); background: var(--superficie-2); border-color: var(--azul-borde); } /* Premios por lugar. */ .rtc-premios { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rtc-premios__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); } .rtc-premios__medalla { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-suave); font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; } .rtc-premios__medalla--oro { color: var(--negro); background: var(--var-gold); border-color: var(--var-gold); } /* TEMA (guardian-tema, MENOR): en claro el --var-gold es token de MARCO (3:1) y falla como relleno con texto (3.55:1). En claro la medalla del 1º se sirve como ARO oro + número --texto (acento gráfico, no texto de color); el oro de espíritus no se toca. */ [data-tema="claro"] .rtc-premios__medalla--oro { color: var(--texto); background: transparent; border: 2px solid var(--var-gold); } .rtc-premios__txt { color: var(--texto); font-weight: 500; } .rtc-premios__sin { color: var(--texto-suave); font-style: normal; } /* Podio de ganadores. */ .rtc-podio { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rtc-podio__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--azul-dim); border: 1px solid var(--azul-borde); border-radius: var(--radio-sm); } .rtc-podio__pos { flex: 0 0 auto; font-family: var(--font-head); font-weight: 700; color: var(--azul-claro); min-width: 34px; } /* Oro del podio atado al oro de PREMIOS vía --oro-texto (AA en ambos temas). */ .rtc-podio__pos--oro { color: var(--oro-texto); } .rtc-podio__epic { font-weight: 600; color: var(--texto); } .rtc-podio__premio { color: var(--texto-suave); margin-left: auto; text-align: right; } /* m5 (uxui) — jerarquía del podio: el 1º lugar se realza (aro oro + tamaño + trofeo). */ .rtc-podio__item:first-child { border-color: var(--var-gold); background: rgba(var(--var-gold-rgb), 0.10); } .rtc-podio__item:first-child .rtc-podio__pos { font-size: 1.15rem; color: var(--oro-texto); } .rtc-podio__item:first-child .rtc-podio__pos::before { content: "\1F3C6"; /* 🏆 trofeo — acento del 1er lugar */ margin-right: 4px; font-size: 1em; } /* Micro-celebración CSS-only al revelar los ganadores (sobria). */ .rtc-podio-wrap.is-celebra .rtc-podio__item { animation: rtc-podio-pop 480ms ease-out both; } .rtc-podio-wrap.is-celebra .rtc-podio__item:nth-child(2) { animation-delay: 90ms; } .rtc-podio-wrap.is-celebra .rtc-podio__item:nth-child(3) { animation-delay: 180ms; } @keyframes rtc-podio-pop { 0% { opacity: 0; transform: translateY(8px) scale(0.98); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rtc-podio-wrap.is-celebra .rtc-podio__item { animation: none; } } /* Requisitos del sorteo. */ .rtc-requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .rtc-requisitos__item { position: relative; padding-left: 20px; color: var(--texto-suave); line-height: 1.45; } .rtc-requisitos__item::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); } /* Sorteo sin cupo (participación abierta). */ .rtc-sorteo__cupoabierto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; color: var(--texto-suave); } .rtc-sorteo__transp { color: var(--texto-suave); font-size: 0.86rem; margin: 8px 0 0; } /* Notas de comunidad obligatorias. */ .rtc-nota-com { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radio-sm); font-size: 0.86rem; line-height: 1.45; border: 1px solid var(--borde); } .rtc-nota-com--participante { color: var(--texto-suave); background: var(--superficie-2); } .rtc-nota-com--streamer { color: var(--texto); background: rgba(var(--error-rgb), 0.10); border-color: rgba(var(--error-rgb), 0.35); } /* Panel de gestión (reusa .rtc-modlobby si existe; añade utilidades propias). */ .rtc-eventos__gestion { margin-top: 14px; } .rtc-modlobby__botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .rtc-modlobby__h4 { font-family: var(--font-head); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--texto-suave); margin: 12px 0 6px; } .rtc-modlobby__vacio { color: var(--texto-suave); } .rtc-modlobby__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rtc-modlobby__fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); } .rtc-modlobby__fila.is-retirado { opacity: 0.55; } .rtc-modlobby__epic { font-weight: 600; color: var(--texto); } .rtc-modlobby__wa { color: var(--azul-claro); font-variant-numeric: tabular-nums; } /* m6 (uxui): WhatsApp click-to-chat (wa.me). Afordancia de enlace + tap-target. */ .rtc-modlobby__wa--link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; text-decoration: underline; text-underline-offset: 2px; } .rtc-modlobby__wa--link:hover { text-decoration: none; } .rtc-modlobby__wa--link:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-modlobby__wa--vacio { color: var(--texto-suave); } .rtc-modlobby__fila .rtc-btnmini { margin-left: auto; } /* ADENDA v2 (§0-bis D2) — curaduría de dadores dentro de la gestión gateada. SOLO layout; color/tipografía por tokens existentes (cero hex literal). Reusa .rtc-modosel (pills de tipo), .rtc-espgrupos/.rtc-espopt (multi-selección de espíritu ofrecido) y .rtc-consent. */ .rtc-modlobby__dadores { margin: 12px 0; padding: 10px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); } .rtc-modlobby__cupolleno { margin: 8px 0 0; } .rtc-daform { margin-top: 10px; } .rtc-daform__sum { display: inline-flex; align-items: center; cursor: pointer; list-style: none; } .rtc-daform__sum::-webkit-details-marker { display: none; } .rtc-daform__sum:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-daform__body { display: grid; gap: 10px; margin-top: 10px; } .rtc-daform__tipo { flex-wrap: wrap; } .rtc-daform__camino { display: grid; gap: 10px; } .rtc-daform__prev { min-height: 20px; } .rtc-daform__prevok { color: var(--azul-claro); font-weight: 600; } .rtc-daform__esp { margin-top: 4px; } /* Botón secundario compacto (área táctil ≥44px). */ .rtc-btnmini { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 6px 14px; border-radius: var(--radio-sm); background: var(--superficie); border: 1px solid var(--azul-borde); color: var(--azul-claro); font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; cursor: pointer; } .rtc-btnmini:hover { background: var(--azul-dim); } .rtc-btnmini[disabled] { opacity: 0.6; cursor: default; } .rtc-btnmini:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-btnmini--quitar { color: var(--error); border-color: rgba(var(--error-rgb), 0.45); } .rtc-btnmini--quitar:hover { background: rgba(var(--error-rgb), 0.12); } /* Sortear: acción destacada del dueño. */ .rtc-sortear { color: var(--sobre-acento); background: var(--grad); border-color: transparent; } .rtc-sortear:hover { filter: brightness(1.06); background: var(--grad); } /* Marcar ganadores por lugar. */ .rtc-modganadores { display: grid; gap: 8px; margin-top: 8px; } .rtc-modganadores__fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rtc-modganadores__lugar { font-family: var(--font-head); font-weight: 700; color: var(--texto); min-width: 34px; } .rtc-modganadores__sel { flex: 1 1 160px; min-height: var(--tap); padding: 6px 10px; border-radius: var(--radio-sm); background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); } /* Historial de sorteos (auditoría). */ .rtc-histsorteo { margin-top: 12px; } .rtc-histsorteo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .rtc-histsorteo__item { color: var(--texto-suave); font-size: 0.85rem; padding: 6px 10px; background: var(--superficie-2); border-radius: var(--radio-sm); } /* ========================================================= INTERCAMBIOS DE ESPÍRITUS (SPEC 0009) Tarjeta de lobby + componente `.rtc-equipo` (dos grupos dador↔receptor con emparejamiento), selector de rol (pills) y selector de espíritu (rejilla .rtc-esp). Solo tokens del tema (azul/blanco/negro por [data-tema]); mobile-first, BEM. ========================================================= */ /* Reusa el marco de tarjeta de torneo/sorteo. */ .rtc-intercambio { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-card); padding: 16px 16px 18px; display: flex; flex-direction: column; } .rtc-intercambio__tit { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--texto); margin: 0; line-height: 1.2; } .rtc-intercambio__espfijo { display: inline-flex; } /* Componente de equipo: dos grupos + flecha de reparto. */ .rtc-equipo { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0 4px; align-items: start; } .rtc-equipo__flecha { display: none; align-self: center; color: var(--azul-claro); font-size: 1.4rem; } @media (min-width: 620px) { .rtc-equipo { grid-template-columns: 1fr auto 1fr; } .rtc-equipo__flecha { display: block; } } .rtc-equipo__col { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 10px 12px 12px; } .rtc-equipo__col--dador { border-color: var(--azul-borde); } .rtc-equipo__rol { font-family: var(--font-head); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-suave); margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rtc-equipo__cupo { font-variant-numeric: tabular-nums; color: var(--azul-claro); font-weight: 700; } .rtc-equipo__espera { color: var(--texto-suave); font-weight: 500; font-size: 0.78rem; } .rtc-equipo__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rtc-equipo__slot { border-radius: var(--radio-sm); padding: 8px 10px; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; gap: 4px; } .rtc-equipo__slot--ocupado { background: var(--superficie); border: 1px solid var(--borde); } .rtc-equipo__slot--vacio { /* m1 (uxui): sin cursiva y con más peso/contraste (legible en claro). */ color: var(--texto); border: 1px dashed var(--azul-borde); font-size: 0.88rem; font-weight: 600; align-items: center; flex-direction: row; } .rtc-equipo__ident { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rtc-equipo__epic { font-weight: 600; color: var(--texto); } .rtc-equipo__epic--link { color: var(--azul-claro); text-decoration: none; } .rtc-equipo__epic--link:hover { text-decoration: underline; } .rtc-equipo__badge { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--azul-claro); background: var(--azul-dim); border: 1px solid var(--azul-borde); border-radius: 999px; padding: 1px 7px; } .rtc-equipo__sinsp { font-size: 0.8rem; color: var(--texto-suave); font-style: italic; } .rtc-equipo__esp { display: inline-flex; } /* Emparejamiento "quién le pasa a quién". */ .rtc-equipo__pares { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; } .rtc-equipo__par { font-size: 0.9rem; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Cromo de espíritu en tamaño MINI (dentro de slots/pares). */ .rtc-esp--mini { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: var(--radio-sm); background: rgba(var(--marco-rgb), 0.10); border: 1px solid var(--marco); } .rtc-esp--mini .rtc-esp__fig { width: 26px; height: 26px; border: 0; padding: 0; } .rtc-esp--mini .rtc-esp__img { width: 26px; height: 26px; } .rtc-esp--mini .rtc-esp__nombre { font-size: 0.78rem; color: var(--texto); margin: 0; } /* Selector de rol (pills). Reusa la idea de .rtc-modosel, autocontenido en el público. */ .rtc-equipo__rolsel, .rtc-modosel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; } .rtc-modosel__lbl { color: var(--texto-suave); font-size: 0.85rem; font-weight: 600; } .rtc-modosel__op { min-height: var(--tap); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font-weight: 600; cursor: pointer; } .rtc-modosel__op:hover { background: var(--azul-dim); } .rtc-modosel__op:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-modosel__op.is-active { background: var(--azul-dim); border-color: var(--azul); color: var(--azul-claro); } .rtc-modosel__op[disabled] { opacity: 0.55; cursor: not-allowed; } .rtc-modosel__lleno { font-size: 0.75rem; color: var(--texto-suave); } /* Selector de espíritu — v2 (C1/M1/M2): COLAPSADO en

(no empuja el CTA) y AGRUPADO por base reusando `.rtc-espgrupos` (columnas de variante, sin truncar). */ .rtc-espsel-wrap { margin: 8px 0 10px; } .rtc-espsel--fijo { display: inline-flex; } /* Acordeón "Elige tu espíritu ▸" — dispara la rejilla; colapsado por defecto. */ .rtc-espsel-det { margin: 4px 0 10px; } .rtc-espsel-det__sum { cursor: pointer; list-style: none; min-height: var(--tap); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radio-sm); background: var(--superficie-2); border: 1px solid var(--azul-borde); color: var(--azul-claro); font-weight: 600; } .rtc-espsel-det__sum::-webkit-details-marker { display: none; } .rtc-espsel-det__sum::before { content: "\25B8"; /* ▸ */ transition: transform 0.2s ease; } .rtc-espsel-det[open] .rtc-espsel-det__sum::before { transform: rotate(90deg); } .rtc-espsel-det__sum:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-espsel-det__sel { color: var(--texto); font-weight: 500; } .rtc-espsel-det__body { margin-top: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; } .rtc-espsel__de { margin: 0 0 8px; font-weight: 700; color: var(--texto); } /* En el selector, la rejilla agrupada respira más en 1 columna dentro del form. */ .rtc-espsel-grid { gap: 16px; } @media (min-width: 720px) { .rtc-espsel-grid { grid-template-columns: 1fr; } } .rtc-lobby__aviso-esp { margin: 4px 0 8px; padding: 8px 10px; border-radius: var(--radio-sm); background: var(--superficie-2); border: 1px dashed var(--azul-borde); color: var(--texto); font-size: 0.85rem; } /* Opción seleccionable del selector (cromo .rtc-esp clicable). */ .rtc-espopt { cursor: pointer; background: var(--superficie); border-radius: var(--radio-sm); padding: 6px; text-align: center; } /* Dentro de la rejilla agrupada, la opción ocupa toda la celda de su variante. */ .rtc-espgrupo__grid .rtc-espopt { width: 100%; } .rtc-espopt:hover { background: var(--azul-dim); } .rtc-espopt:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .rtc-espopt.is-sel { outline: 2px solid var(--azul); outline-offset: 1px; background: var(--azul-dim); } .rtc-equipo__paresp { display: inline-flex; } /* --------------------------------------------------------- FAB de WhatsApp (SPEC 0018 §D) — botón flotante en vistas públicas. Verde de marca por tokens (--ok / --verde-tinta), sombra vía rgba(var(--ok-rgb),…). El tooltip .rtc-fab__label solo aparece en desktop-hover. Colisión con la barra .rtc-espbar del tracker: en <720px la barra es full-width → se oculta el FAB en .rtc-vista-espiritus; en ≥720px la barra es estática y el FAB se muestra normal. --------------------------------------------------------- */ .rtc-fab--wa { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--ok); color: var(--verde-tinta); border: 0; box-shadow: 0 4px 14px rgba(var(--ok-rgb), 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; animation: rtc-fab-in 0.3s ease-out 0.1s both; } .rtc-fab--wa svg { width: 26px; height: 26px; } .rtc-fab--wa:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--ok-rgb), 0.45); } .rtc-fab--wa:active { transform: translateY(0) scale(0.96); } .rtc-fab--wa:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; } @keyframes rtc-fab-in { from { opacity: 0; transform: scale(0.6) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .rtc-fab__label { position: absolute; right: calc(100% + 10px); white-space: nowrap; background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 12px; font: 600 0.85rem var(--font-body); box-shadow: var(--sombra-card); opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } @media (hover: hover) and (min-width: 720px) { .rtc-fab--wa:hover .rtc-fab__label, .rtc-fab--wa:focus-visible .rtc-fab__label { opacity: 1; transform: translateX(0); } } @media (max-width: 719px) { .rtc-fab__label { display: none; } .rtc-vista-espiritus .rtc-fab--wa { display: none; } } @media (prefers-reduced-motion: reduce) { .rtc-fab--wa { animation: none; } .rtc-fab--wa:hover { transform: none; } .rtc-fab__label { transition: none; transform: none; } }