/* ═══════════════════════════════════════════════════════════════════════════ LA RED · v6.14 — sistema de comunicación de SD LIVE --------------------------------------------------------------------------- Todo el color de una sala sale de dos variables que fija el shell: --acc color de la sala --accRGB el mismo color en componentes, para las transparencias Cambiarlas tiñe encabezado, resplandor, badges, burbujas y compositor. Tipografías: las que ya carga la app (Inter + IBM Plex Mono). El mockup usaba JetBrains Mono; son casi idénticas y no vale otra descarga. ═══════════════════════════════════════════════════════════════════════════ */ /* El tema del sitio no debe asomar por debajo. Solo el pinta negro: los contenedores del tema van TRANSPARENTES, o taparían el fondo 3D (que son tres capas fijas en z-index 0-2, por debajo del contenido). Ese fue el error de la primera versión: La Red se veía como una página de otra aplicación porque el canvas quedaba oculto. */ /* El TAMBIÉN va en negro, no solo el . De aquí salía la franja blanca del final: el panel es `position: fixed` y llega hasta el borde del viewport, pero por debajo de él —la zona de rebote del scroll y el área del indicador de inicio en iPhone— quien pinta es el elemento raíz. Con el body en negro y el html en blanco por defecto, ahí aparecía la banda. Esta hoja solo se carga en /tah-red, así que la regla no se escapa a ninguna otra página. */ /* ── NADA DE «DESLIZA PARA RECARGAR» ─────────────────────────────────────── El navegador del móvil recarga la página cuando arrastras hacia abajo estando ya arriba del todo. En un sitio normal se agradece; dentro de una app a pantalla completa es un desastre: volver arriba en una lista es exactamente ese gesto, y en vez de subir, la pantalla se recarga y arranca de cero. `overscroll-behavior-y: none` va en los DOS elementos y sin condicionar a ninguna clase: esta hoja solo se carga en /tah-red, así que no se escapa a ninguna otra página, y si algo impidiera que la clase del llegue, la regla sigue en pie. Lo mismo apaga el rebote elástico de iOS. */ html, body { overscroll-behavior-y: none; overscroll-behavior-x: none; } html { background: #000 !important; } body.tah-red-page { background: #000 !important; color: var(--tah-text) !important; } body.tah-red-page #page, body.tah-red-page #content, body.tah-red-page .site-content, body.tah-red-page .entry-content, body.tah-red-page .site-main, body.tah-red-page .wp-site-blocks, /* Y los de Elementor, que son los que hay de verdad en este sitio. Sin esto la columna del tema sigue pintando su fondo y su relleno por detrás del panel. */ body.tah-red-page .elementor, body.tah-red-page .elementor-section, body.tah-red-page .elementor-container, body.tah-red-page .elementor-column, body.tah-red-page .elementor-widget-wrap, body.tah-red-page .elementor-widget-container, body.tah-red-page .elementor-widget-theme-post-content, body.tah-red-page .e-con, body.tah-red-page .e-con-inner { background: transparent !important; color: var(--tah-text) !important; margin: 0 !important; padding: 0 !important; max-width: none !important; } body.tah-red-page .entry-title, body.tah-red-page .page-title, body.tah-red-page .wp-block-post-title { display: none !important; } /* ── EL PANEL NO PUEDE TENER ANTEPASADOS QUE LO CAPTUREN ─────────────────── `position: fixed` deja de anclarse al viewport si algún antepasado tiene transform, filter, perspective, backdrop-filter o contain — pasa a anclarse a ESE elemento. Elementor los pone por su cuenta (animaciones de entrada, efectos de scroll, secciones fijas), y cuando ocurre, el panel se convierte en una caja normal dentro de la columna del tema: .tah-red-scroll deja de ser quien scrollea, empieza a scrollear el documento y la lista da el salto hacia arriba que se ve en el teléfono. red.js además saca el panel a , que es la defensa definitiva. Esto de aquí es el cinturón: cubre el instante entre que se pinta el HTML y corre el JavaScript, que es justo cuando se nota el salto. */ body.tah-red-page #page, body.tah-red-page #content, body.tah-red-page .site-content, body.tah-red-page .site-main, body.tah-red-page .entry-content, body.tah-red-page .wp-site-blocks, body.tah-red-page .elementor, body.tah-red-page .elementor-section, body.tah-red-page .elementor-container, body.tah-red-page .elementor-column, body.tah-red-page .elementor-widget-wrap, body.tah-red-page .elementor-widget-container, body.tah-red-page .elementor-widget-theme-post-content, body.tah-red-page .e-con, body.tah-red-page .e-con-inner { transform: none !important; filter: none !important; perspective: none !important; backdrop-filter: none !important; contain: none !important; will-change: auto !important; /* Elementor deja las secciones animadas invisibles hasta que su JS las revela; si el panel cuelga de una de ellas, La Red no aparece. */ opacity: 1 !important; animation: none !important; } /* ── EL DOCUMENTO NO SCROLLEA. DE VERDAD ─────────────────────────────────── `overflow: hidden` en el NO detiene el scroll en Safari de iPhone. Es un fallo viejo y conocido de iOS: la regla se acepta, pero el documento se sigue pudiendo arrastrar — y arrastrarlo estando arriba del todo es justo el gesto de "desliza para recargar". De ahí que bajar funcionara y subir recargara la pantalla. Lo único que iOS respeta es sacar el del flujo con `position: fixed`. Sin documento que arrastrar no hay gesto que interpretar, y el único que scrollea pasa a ser .tah-red-scroll, que es lo que queríamos desde el principio. Va por partida doble: · `body.tah-red-page` la pone PHP en la cabecera (sin parpadeo). · `html.tah-red-locked` la pone red.js al encontrar el panel — sobrevive a una caché de página que hubiera servido el sin su clase. */ html.tah-red-locked, body.tah-red-page { height: 100%; overflow: hidden !important; overscroll-behavior: none; } html.tah-red-locked body, body.tah-red-page { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0 !important; overflow: hidden !important; overscroll-behavior: none; /* `position: fixed` en el NO convierte al body en bloque contenedor de sus hijos fijos —solo lo harían transform, filter o contain—, así que el panel sigue anclado al viewport. */ } body.tah-red-page .site-footer, body.tah-red-page .site-header, body.tah-red-page .wp-block-template-part, body.tah-red-page .elementor-location-header, body.tah-red-page .elementor-location-footer { display: none !important; } /* ── Shell ───────────────────────────────────────────────────────────────── Ocupa el viewport y punto. `inset: 0` + `max-width` + `margin: 0 auto` centra la columna sin necesidad de transform (que además rompería el position:fixed de cualquier hijo). Las zonas seguras se aplican DENTRO, en la barra superior y en el compositor — no aquí. Si se aplicaran al shell, el fondo se cortaría en el notch en vez de correr por debajo, que es lo que se espera. */ .tah-red-shell { --acc: #E8A13A; --accRGB: 232,161,58; --red-card: #101114; --red-card2: #17191e; --red-line: rgba(255,255,255,.075); --red-line2: rgba(255,255,255,.13); --red-mut: #868C96; --red-mut2: #5E646E; position: fixed; inset: 0; /* z-3: por encima de las tres capas del fondo 3D (atmos 0, canvas 1, scan 2), igual que el contenido del dashboard. */ z-index: 3; display: flex; flex-direction: column; width: 100%; max-width: 430px; margin: 0 auto; background: transparent; color: var(--tah-text); font-family: var(--tah-font); overflow: hidden; } .tah-red-shell::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; transition: background .35s; background: radial-gradient(600px 320px at 80% -8%, rgba(var(--accRGB),.13), transparent 70%), radial-gradient(460px 300px at 8% 46%, rgba(var(--accRGB),.05), transparent 72%); } /* ── Barra superior ────────────────────────────────────────────────────── */ .tah-red-top { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 11px; /* La zona segura de ARRIBA va aquí: sin esto, en iPhone el botón de volver y el título quedaban debajo de la hora y la batería. */ padding: calc(14px + env(safe-area-inset-top)) 16px 13px; background: rgba(0,0,0,.74); backdrop-filter: blur(14px); border-bottom: 1px solid var(--red-line); } .tah-red-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: linear-gradient(90deg, var(--acc), transparent 78%); box-shadow: 0 0 14px rgba(var(--accRGB),.45); transition: background .35s; } .tah-red-ibtn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--red-line2); background: var(--red-card); color: var(--red-mut); font-size: 15px; text-decoration: none; cursor: pointer; } .tah-red-ibtn:active { background: var(--red-card2); } .tah-red-ttl { flex: 1; min-width: 0; } .tah-red-ttl h1 { margin: 0; font-family: var(--tah-font-mono); font-size: 19.5px; font-weight: 700; letter-spacing: .055em; line-height: 1.15; color: #FBFCFD; text-shadow: 0 0 18px rgba(var(--accRGB),.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tah-red-sub { margin-top: 4px; font-family: var(--tah-font-mono); font-size: 10.5px; letter-spacing: .09em; color: var(--red-mut); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Cuerpo ──────────────────────────────────────────────────────────────── `min-height: 0` NO es opcional: era EL fallo de la maquetación. Un hijo de flex tiene `min-height: auto` por defecto, es decir, se niega a encogerse por debajo de su contenido. Sin esta línea el área de mensajes nunca scrolleaba por dentro: crecía, empujaba el compositor fuera de la pantalla, dejaba hueco al final y hacía que todo se fuera hacia arriba. */ .tah-red-scroll { flex: 1 1 auto; min-height: 0; position: relative; z-index: 1; /* En las vistas SIN compositor (índice, Live now!, privados) el último elemento tiene que librar el indicador de inicio del iPhone; si hay compositor, de eso se encarga él y aquí sobra. */ padding: 15px 15px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; } .tah-red-shell[data-red-view="channel"] .tah-red-scroll { padding-bottom: 26px; } .tah-red-scroll::-webkit-scrollbar { display: none; } /* En una CONVERSACIÓN los mensajes se apoyan abajo, como en cualquier chat. Apilados desde arriba —que es como estaban— con pocos mensajes dejaban un hueco debajo y daban la sensación de que el scroll iba al revés. `margin-top: auto` en el primer hijo y no `justify-content: flex-end`: con flex-end, en cuanto el contenido desborda, algunos navegadores recortan por arriba y los mensajes viejos se vuelven inalcanzables. */ .tah-red-shell[data-red-view="channel"] .tah-red-scroll { display: flex; flex-direction: column; } /* El empujón hacia abajo va en el primer separador de día, no en el primer hijo: si fuera el primer hijo, en una sala vacía el aviso permanente y el estado vacío se irían también al fondo. Así el aviso se queda arriba —como en cualquier mensajería— y solo la conversación se apoya abajo. */ .tah-red-shell[data-red-view="channel"] .tah-red-scroll > .tah-red-sep:first-of-type { margin-top: auto; } .tah-red-eyeb { display: flex; align-items: center; gap: 8px; margin: 20px 2px 10px; font-family: var(--tah-font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--red-mut2); } .tah-red-eyeb::before { content: ''; width: 14px; height: 2px; border-radius: 2px; background: currentColor; } .tah-red-eyeb:first-child { margin-top: 2px; } .tah-red-eyeb.is-transmision { color: #B98F3B; } .tah-red-eyeb.is-comunidad { color: #4B87B8; } .tah-red-eyeb.is-combate { color: #B33F4E; } .tah-red-eyeb.is-sector { color: #3E9C63; } .tah-red-eyeb.is-privado { color: #B85292; } .tah-red-notice { display: flex; gap: 9px; padding: 11px 13px; border-radius: 14px; background: rgba(var(--accRGB),.06); border: 1px solid rgba(var(--accRGB),.2); font-size: 11.5px; line-height: 1.5; color: #C6CCD4; } .tah-red-notice b { color: #E6EAEF; font-weight: 600; } /* ── Filas de canal ────────────────────────────────────────────────────── */ .tah-red-chan { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 8px; border-radius: 17px; background: var(--red-card); border: 1px solid var(--red-line); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, background .15s; } .tah-red-chan::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--acc)); } .tah-red-chan:not(.is-locked):active { background: var(--red-card2); transform: scale(.985); } /* Sin respuesta al toque: una sala cerrada no debe sentirse pulsable. */ .tah-red-chan.is-locked { opacity: .42; cursor: default; } .tah-red-chan-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; /* Respaldo neutro para WebViews viejos sin color-mix() */ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); } .tah-red-chan-body { flex: 1; min-width: 0; } .tah-red-chan-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tah-red-chan-prev { display: block; margin-top: 3px; font-size: 11.5px; color: var(--red-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tah-red-chan-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--c, var(--acc)); color: #0B0C0E; font-size: 10.5px; font-weight: 700; } .tah-red-chan-badge.is-quiet { background: var(--red-card2); color: var(--red-mut2); border: 1px solid var(--red-line2); font-weight: 500; } .tah-red-chan-lock { flex: none; font-family: var(--tah-font-mono); font-size: 10.5px; color: var(--red-mut2); } /* ── COMBATE: las dos salas que tienen que arder ─────────────────────────── El resto del índice es deliberadamente sobrio. Estas dos no: son las que mueven a la gente a encender la cámara, y en una lista de doce salas todas iguales se pierden. Aquí sí se gasta rojo. */ /* Live now! · late SOLO cuando hay alguien al aire (la clase la pone PHP contando sesiones activas, ver TAH_Red::live_count). */ .tah-red-chan.is-onair { --c: #FF3B30; background: radial-gradient(130% 160% at 0% 50%, rgba(255,59,48,.20), transparent 62%), var(--red-card); border-color: rgba(255,59,48,.55); animation: tah-red-onair 1.9s ease-in-out infinite; } @keyframes tah-red-onair { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0), inset 0 0 22px rgba(255,59,48,.07); } 50% { box-shadow: 0 0 20px 0 rgba(255,59,48,.38), inset 0 0 28px rgba(255,59,48,.16); } } .tah-red-chan.is-onair::before { width: 4px; background: #FF3B30; box-shadow: 0 0 12px rgba(255,59,48,.9); } .tah-red-chan.is-onair .tah-red-chan-ico { background: rgba(255,59,48,.18); border-color: rgba(255,59,48,.6); animation: tah-red-beat 1.9s ease-in-out infinite; } /* El latido es de la caja del icono, no del emoji: escalar un emoji lo deja borroso en Android. */ @keyframes tah-red-beat { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.11); } 38% { transform: scale(1); } 56% { transform: scale(1.07); } } .tah-red-chan.is-onair .tah-red-chan-name { color: #FFD9D6; } .tah-red-chan.is-onair .tah-red-chan-prev { color: #FF8E85; } /* El contador de gente al aire: punto rojo con halo, como el de una cámara. */ .tah-red-chan-onair { position: relative; flex: none; min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: #FF3B30; color: #fff; font-family: var(--tah-font-mono); font-size: 11px; font-weight: 700; box-shadow: 0 0 14px rgba(255,59,48,.6); } .tah-red-chan-onair::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 1.5px solid rgba(255,59,48,.6); animation: tah-red-ring 1.9s ease-out infinite; } @keyframes tah-red-ring { 0% { transform: scale(.85); opacity: .9; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } /* Planes de Batalla · parpadea el fondo rojo que hay detrás de las espadas. Las espadas no se mueven: lo que respira es la brasa de debajo. Se anima el fondo del propio recuadro y no un pseudo-elemento a propósito: un ::before por debajo del emoji obliga a pelearse con el z-index dentro de una tarjeta que ya tiene su propia capa, y ahí es donde se rompe en Android. */ .tah-red-chan[data-slug="batallas"]:not(.is-locked) .tah-red-chan-ico { border-color: rgba(224,87,74,.55); animation: tah-red-ember 2.4s ease-in-out infinite; } @keyframes tah-red-ember { 0%, 100% { background-color: rgba(224,87,74,.12); box-shadow: none; } 50% { background-color: rgba(224,87,74,.62); box-shadow: 0 0 16px rgba(224,87,74,.5); } } /* Quien pidió menos movimiento no recibe nada de esto: sigue viéndose el rojo, pero quieto. */ @media (prefers-reduced-motion: reduce) { .tah-red-chan.is-onair, .tah-red-chan.is-onair .tah-red-chan-ico, .tah-red-chan-onair::after, .tah-red-chan[data-slug="batallas"] .tah-red-chan-ico { animation: none; } .tah-red-chan[data-slug="batallas"]:not(.is-locked) .tah-red-chan-ico { background-color: rgba(224,87,74,.4); } } /* ═══ COMPONENTE ÚNICO DE IDENTIDAD ═══════════════════════════════════════ Orden canónico: SECTOR → RANGO → @handle. Se usa igual en cabeceras, menciones, citas y listados. Si cambia, cambia aquí. */ .tah-rid { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } /* El @ se recorta con puntos suspensivos en vez de desbordar la tarjeta. Los usuarios de TikTok llegan a 24 caracteres: sin esto, un nombre largo rompía la fila del índice, la de Live now! y la cabecera del mensaje. */ .tah-rid-at { font-size: 12.5px; font-weight: 600; color: var(--tah-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Sector — glifo griego con el color de la facción */ .tah-rid-sc { flex: none; width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 6px; font-family: var(--tah-font-mono); font-size: 11px; font-weight: 700; line-height: 1; color: var(--sc, #7BA9C4); /* Respaldo neutro para WebViews viejos sin color-mix() */ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); background: color-mix(in srgb, var(--sc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent); } /* Rango — cinco escalones de material, como los donadores de TikTok */ .tah-rid-rk { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 4px; border-radius: 6px; border: 1px solid; font-family: var(--tah-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; } .tah-rid-rk i { font-style: normal; font-size: 8px; opacity: .85; } .tah-rid-rk.is-t1 { background: linear-gradient(140deg,#3A3F47,#23262B); border-color:#4A505A; color:#C3C9D2; } .tah-rid-rk.is-t2 { background: linear-gradient(140deg,#7A4A22,#4A2C13); border-color:#A9642E; color:#F0C79B; } .tah-rid-rk.is-t3 { background: linear-gradient(140deg,#7C848E,#4B525A); border-color:#A8B2BE; color:#F0F3F7; } .tah-rid-rk.is-t4 { background: linear-gradient(140deg,#C79427,#7C5A12); border-color:#EBBB4E; color:#FFF0C4; } .tah-rid-rk.is-t5 { background: linear-gradient(140deg,#4FC7E8,#8B5CF6); border-color:#8FDCF2; color:#F2FBFF; box-shadow: 0 0 10px rgba(96,190,240,.3); } .tah-rid-you, .tah-rid-tag { flex: none; padding: 2.5px 6px; border-radius: 5px; border: 1px solid var(--red-line2); font-family: var(--tah-font-mono); font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--red-mut2); } .tah-rid-you { color: #A99CE0; border-color: rgba(139,124,196,.5); background: rgba(139,124,196,.12); } /* Mención dentro de un texto */ .tah-rid--mn { gap: 3px; padding: 1px 6px 1px 3px; border-radius: 6px; background: rgba(90,169,230,.1); border: 1px solid rgba(90,169,230,.25); vertical-align: 1px; } .tah-rid--mn .tah-rid-at { color: #8FBEE4; font-size: 12px; } .tah-rid--mn .tah-rid-sc { width: 16px; height: 16px; font-size: 9px; } .tah-rid--mn .tah-rid-rk { padding: 1px 4px 1px 3px; font-size: 8.5px; } /* Reducida — dentro de una cita */ .tah-rid--sm { gap: 4px; } .tah-rid--sm .tah-rid-at { font-size: 11px; } .tah-rid--sm .tah-rid-sc { width: 15px; height: 15px; font-size: 9px; } .tah-rid--sm .tah-rid-rk { padding: 1px 4px 1px 3px; font-size: 8.5px; } .tah-red-selfcard { display: flex; flex-direction: column; gap: 8px; padding: 13px; border-radius: 16px; background: var(--red-card); border: 1px solid var(--red-line); } .tah-red-selfcard p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--red-mut); } /* ── Mensajes ──────────────────────────────────────────────────────────── */ .tah-red-sep { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; } .tah-red-sep::before, .tah-red-sep::after { content: ''; flex: 1; height: 1px; background: var(--red-line); } .tah-red-sep span { font-family: var(--tah-font-mono); font-size: 9px; letter-spacing: .17em; color: var(--red-mut2); } .tah-red-msg { display: flex; gap: 10px; margin-bottom: 16px; } .tah-red-msg.is-pending, .tah-red-msg.is-held { opacity: .6; } .tah-red-av { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(150deg,#2a2d33,#1b1d22) center/cover; border: 1px solid var(--red-line2); color: #B9C0CB; font-family: var(--tah-font-mono); font-size: 11px; font-weight: 700; } .tah-red-av.is-lola { background: linear-gradient(150deg,#F06AB4,#8B3FA8); border-color: rgba(240,106,180,.5); color: #fff; } .tah-red-av.is-lola.has-image { background-size: cover; background-position: center; } .tah-red-av.is-agency { background: linear-gradient(150deg,#E9B44C,#9A6B12); border-color: rgba(233,180,76,.5); color: #241900; } .tah-red-mb { flex: 1; min-width: 0; } .tah-red-mhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; } .tah-red-who { font-size: 12.5px; font-weight: 600; } .tah-red-who.is-lola { color: #F06AB4; } .tah-red-who.is-agency { color: var(--tah-primary); } .tah-red-tag { padding: 2.5px 6px; border-radius: 5px; border: 1px solid var(--red-line2); font-family: var(--tah-font-mono); font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--red-mut2); } .tah-red-tag.is-ia { color: #F06AB4; border-color: rgba(240,106,180,.3); background: rgba(240,106,180,.07); } /* «Solo para ti»: un mensaje dirigido dentro de una sala compartida. Va en el color de acento de la sala para que se lea como parte de ella y no como un error. Ver TAH_Red::render_message(). */ .tah-red-tag.is-only { color: var(--acc); border-color: rgba(var(--accRGB),.4); background: rgba(var(--accRGB),.09); } /* El mensaje entero se marca con una banda del color de la sala: de un vistazo se distingue lo que es para todos de lo que es tuyo. */ .tah-red-msg:has(.tah-red-tag.is-only) .tah-red-mb { border-left: 2px solid rgba(var(--accRGB),.45); padding-left: 9px; } .tah-red-when { margin-left: auto; font-family: var(--tah-font-mono); font-size: 10px; color: var(--red-mut2); } .tah-red-mtxt { font-size: 13.5px; line-height: 1.58; color: #D6DAE0; overflow-wrap: anywhere; } .tah-red-mtxt p { margin: 0 0 8px; } .tah-red-mtxt p:last-child { margin-bottom: 0; } .tah-red-quote { display: block; margin-bottom: 7px; padding: 7px 10px; border-left: 2px solid rgba(var(--accRGB),.55); border-radius: 0 9px 9px 0; background: rgba(255,255,255,.028); text-decoration: none; } .tah-red-quote-who { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--acc); } .tah-red-quote-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.45; color: var(--red-mut2); } .tah-red-mstate { margin-top: 6px; font-family: var(--tah-font-mono); font-size: 10px; letter-spacing: .05em; color: var(--red-mut2); } .tah-red-msg.is-held .tah-red-mtxt { border-left: 2px solid var(--tah-warning); padding-left: 9px; } .tah-red-msg.is-rejected { opacity: 1; } .tah-red-msg.is-rejected .tah-red-mtxt{ border-left: 2px solid var(--tah-danger); padding-left: 9px; } .tah-red-msg.is-rejected .tah-red-mstate { color: #E88B84; } .tah-red-msg.is-rejected .tah-red-mstate a { color: var(--acc); } .tah-red-pinned { margin-bottom: 12px; padding: 11px 13px; border-radius: 14px; background: rgba(var(--accRGB),.05); border: 1px solid rgba(var(--accRGB),.22); } .tah-red-pinned-tag { display: block; margin-bottom: 5px; font-family: var(--tah-font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); } .tah-red-pinned-body { font-size: 12.5px; line-height: 1.55; color: #D6DAE0; } .tah-red-empty { padding: 40px 20px; text-align: center; color: var(--red-mut); } .tah-red-empty span { display: block; font-size: 30px; margin-bottom: 10px; opacity: .55; } .tah-red-empty p { margin: 0; font-size: 13px; line-height: 1.55; } .tah-red-empty-cta { display: inline-block; margin-top: 14px; padding: 10px 16px; border-radius: 12px; background: var(--red-card); border: 1px solid var(--red-line2); color: var(--tah-text); font-size: 12.5px; font-weight: 600; text-decoration: none; } /* ── Compositor ────────────────────────────────────────────────────────── */ .tah-red-comp { position: relative; z-index: 2; flex: none; /* La zona segura de ABAJO va aquí: es el último elemento de la columna. */ padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.84); backdrop-filter: blur(14px); border-top: 1px solid var(--red-line); } .tah-red-cwrap { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 15px; background: var(--red-card); border: 1px solid var(--red-line2); } .tah-red-cwrap input { flex: 1; background: none !important; border: none !important; outline: none; color: var(--tah-text) !important; font-family: inherit; font-size: 14px; } .tah-red-cwrap input::placeholder { color: var(--red-mut2); } .tah-red-cwrap.is-disabled { opacity: .55; } .tah-red-send { flex: none; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--acc); color: #0B0C0E; font-size: 13px; font-weight: 700; } .tah-red-hint { margin-top: 7px; font-family: var(--tah-font-mono); font-size: 9px; letter-spacing: .09em; color: var(--red-mut2); text-align: center; } .tah-red-hint.is-readonly { margin-top: 0; padding: 4px 0; } /* ── Botón flotante de LOLA ────────────────────────────────────────────── */ .tah-red-fab { position: absolute; right: 15px; /* Por defecto se apoya en el borde inferior. En las vistas que llevan compositor sube para no taparlo — el selector de hermano lo resuelve solo, sin que haya que acordarse de marcar cada plantilla. */ bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 6; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(150deg,#F06AB4,#7B3FA8) center/cover; border: 2px solid rgba(240,106,180,.75); box-shadow: 0 8px 26px rgba(240,106,180,.32), 0 0 0 5px rgba(0,0,0,.55); font-size: 23px; text-decoration: none; transition: transform .18s; } .tah-red-comp ~ .tah-red-fab { bottom: calc(82px + env(safe-area-inset-bottom)); } .tah-red-fab:active { transform: scale(.92); } .tah-red-fab-dot { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--tah-success); border: 2.5px solid #000; } /* ── Teclado de iOS ───────────────────────────────────────────────────────── TODO campo de texto a 16 px. Por debajo de ese umbral exacto, Safari amplía solo al enfocar y la pantalla se descoloca — es lo que hacía que dejara de parecer una app. (Del alto con el teclado abierto se encarga red.js con la API visualViewport.) */ .tah-red-cwrap input, .tah-red-newteam input, .tah-red-shell input[type="text"], .tah-red-shell input[type="search"], .tah-red-shell textarea, .tah-red-shell select { font-size: 16px; } /* ── Escritorio: la columna se centra con su marco ─────────────────────── */ @media (min-width: 721px) { .tah-red-shell { top: 24px; bottom: 24px; max-height: 920px; border: 1px solid var(--red-line2); border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.6); /* El shell deja de ser opaco para que se vea el fondo 3D, pero en escritorio necesita algo de cuerpo o el marco no se lee. */ background: rgba(0,0,0,.55); backdrop-filter: blur(2px); } } /* ── Menciones dentro del texto ────────────────────────────────────────── */ .tah-red-mention { color: #8FBEE4; font-weight: 600; background: rgba(90,169,230,.1); border-radius: 5px; padding: 0 3px; } /* ── Barra de respuesta citada ─────────────────────────────────────────── */ .tah-red-replybar { display: flex; align-items: center; gap: 9px; margin-bottom: -2px; padding: 9px 12px; border-radius: 13px 13px 0 0; background: var(--red-card); border: 1px solid var(--red-line2); border-bottom: none; } .tah-red-replybar[hidden] { display: none; } .tah-red-replybar-body { flex: 1; min-width: 0; padding-left: 9px; border-left: 2px solid var(--acc); } .tah-red-replybar-body b { display: block; font-size: 11px; font-weight: 600; color: var(--acc); } .tah-red-replybar-body span { display: block; font-size: 11px; color: var(--red-mut2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tah-red-replybar-x { flex: none; border: none; background: none; color: var(--red-mut2); font-size: 17px; line-height: 1; cursor: pointer; } .tah-red-replybar:not([hidden]) + .tah-red-cwrap { border-radius: 0 0 15px 15px; } /* ── Compositor activo ─────────────────────────────────────────────────── */ .tah-red-cwrap { margin: 0; } .tah-red-send { border: none; cursor: pointer; font-family: var(--tah-font-mono); } .tah-red-send:disabled { opacity: .5; cursor: default; } .tah-red-send.is-waiting { font-size: 11px; } .tah-red-hint.is-error { color: #E88B84; } /* ── "LOLA está escribiendo…" ──────────────────────────────────────────── */ .tah-red-typing { display: flex; align-items: center; gap: 9px; padding: 4px 2px 14px 44px; font-size: 11.5px; color: var(--red-mut2); } .tah-red-typing[hidden] { display: none; } .tah-red-typing-txt { color: #F06AB4; } /* ── Aviso flotante ──────────────────────────────────────────────────────── Sustituye a los alert() del navegador. Un cuadro de diálogo del sistema en mitad de un chat rompe de golpe la sensación de app — que es justo lo que se quiere evitar aquí. */ .tah-red-toast { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(8px); z-index: 10; max-width: 88%; padding: 11px 16px; border-radius: 12px; background: rgba(10,11,14,.96); border: 1px solid var(--red-line2); box-shadow: 0 8px 30px rgba(0,0,0,.5); color: var(--tah-text); font-size: 13px; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; } .tah-red-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } .tah-red-toast.is-error { border-color: rgba(224,87,74,.45); color: #F0A9A2; } .tah-red-typing-dots { display: inline-flex; gap: 3px; } .tah-red-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: #F06AB4; animation: tah-red-bounce 1.1s infinite ease-in-out; } .tah-red-typing-dots i:nth-child(2) { animation-delay: .15s; } .tah-red-typing-dots i:nth-child(3) { animation-delay: .3s; } @keyframes tah-red-bounce { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Resalte al saltar a un mensaje citado */ .tah-red-msg.is-flash .tah-red-mtxt { background: rgba(var(--accRGB),.1); border-radius: 8px; box-shadow: 0 0 0 6px rgba(var(--accRGB),.1); } /* ── Hoja de acciones ──────────────────────────────────────────────────── */ .tah-red-ov { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); } .tah-red-ov[hidden] { display: none; } .tah-red-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 80%; padding: 8px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #0D0E11; border-top: 1px solid var(--red-line2); transform: translateY(102%); transition: transform .22s cubic-bezier(.3,.9,.3,1); overflow-y: auto; scrollbar-width: none; } .tah-red-sheet::-webkit-scrollbar { display: none; } .tah-red-sheet[hidden] { display: none; } .tah-red-sheet.is-open { transform: translateY(0); } .tah-red-grab { width: 38px; height: 4px; margin: 6px auto 16px; border-radius: 99px; background: #2C3037; } .tah-red-sheet-ttl { font-family: var(--tah-font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; margin-bottom: 4px; } .tah-red-sheet-sub { font-size: 11.5px; line-height: 1.5; color: var(--red-mut2); margin-bottom: 16px; } .tah-red-acts { display: flex; flex-direction: column; gap: 7px; } .tah-red-act { width: 100%; padding: 13px 14px; border-radius: 13px; background: var(--red-card); border: 1px solid var(--red-line2); color: var(--tah-text); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; } .tah-red-act:active { background: var(--red-card2); } .tah-red-act.is-danger { color: #E88B84; border-color: rgba(224,87,74,.35); } .tah-red-act:disabled { opacity: .5; } /* ── Live now! ─────────────────────────────────────────────────────────── */ .tah-red-lrow { display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin-bottom: 8px; border-radius: 15px; background: var(--red-card); border: 1px solid var(--red-line); } .tah-red-lrow.is-self { border-color: rgba(var(--accRGB),.45); } .tah-red-lav { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(150deg,#2a2d33,#1b1d22); border: 1.5px solid var(--tah-live, #E0574A); color: #B9C0CB; font-family: var(--tah-font-mono); font-size: 11px; font-weight: 700; } .tah-red-lav::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--tah-live, #E0574A); border: 2px solid #000; } .tah-red-lbody { flex: 1; min-width: 0; } .tah-red-lname { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; } .tah-red-lmeta { display: block; margin-top: 3px; font-family: var(--tah-font-mono); font-size: 10px; letter-spacing: .05em; color: var(--red-mut2); } .tah-red-enter { flex: none; padding: 7px 13px; border-radius: 10px; background: rgba(224,87,74,.13); border: 1px solid rgba(224,87,74,.34); color: #FF8593; font-size: 11.5px; font-weight: 600; text-decoration: none; } .tah-red-dashbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 13px; border-radius: 14px; border: 1px dashed var(--red-line2); } .tah-red-dashbox p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--red-mut); } .tah-red-dashbox small { color: var(--red-mut2); font-size: 11px; } /* Hilo de Línea Directa esperando respuesta de la agencia */ .tah-red-chan.is-waiting { border-color: rgba(var(--accRGB),.45); } .tah-red-chan-badge { white-space: nowrap; } .tah-red-hint.is-agency { color: var(--acc); } /* ── Privados: invitaciones, equipos, cuota ────────────────────────────── */ .tah-red-dm { display: flex; align-items: center; gap: 11px; padding: 12px; margin-bottom: 8px; border-radius: 15px; background: var(--red-card); border: 1px solid var(--red-line); } .tah-red-dm.is-invite { background: transparent; border-style: dashed; } .tah-red-dm-acts { flex: none; display: flex; gap: 7px; } .tah-red-mini { padding: 7px 11px; border-radius: 10px; border: 1px solid var(--red-line2); background: var(--red-card2); color: var(--red-mut); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } .tah-red-mini.is-ok { background: var(--acc); color: #0B0C0E; border: none; } .tah-red-mini:disabled { opacity: .5; } .tah-red-quota { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 14px; background: var(--red-card); border: 1px solid var(--red-line); } .tah-red-quota-bar { flex: 1; height: 5px; border-radius: 99px; background: #212429; overflow: hidden; } .tah-red-quota-bar i { display: block; height: 100%; background: var(--acc); border-radius: 99px; } .tah-red-quota-txt { flex: none; font-family: var(--tah-font-mono); font-size: 10px; letter-spacing: .05em; color: var(--red-mut2); } .tah-red-newteam { display: flex; gap: 8px; padding: 10px 12px; border-radius: 15px; background: var(--red-card); border: 1px solid var(--red-line2); } .tah-red-newteam input { flex: 1; min-width: 0; background: none !important; border: none !important; outline: none; color: var(--tah-text) !important; font-family: inherit; font-size: 13.5px; } .tah-red-newteam input::placeholder { color: var(--red-mut2); } /* ── Preferencias de aviso ─────────────────────────────────────────────── */ .tah-red-prefs { margin-top: 4px; } .tah-red-prow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--red-line); } .tah-red-prow-t { flex: 1; min-width: 0; } .tah-red-prow-t b { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 500; } .tah-red-prow-t span { font-size: 11px; line-height: 1.45; color: var(--red-mut2); } .tah-red-tgl { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--red-card2); border: 1px solid var(--red-line2); cursor: pointer; transition: background .2s, border-color .2s; } .tah-red-tgl::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--red-mut2); transition: left .2s, background .2s; } .tah-red-tgl.is-on { background: rgba(var(--accRGB),.3); border-color: rgba(var(--accRGB),.6); } .tah-red-tgl.is-on::after { left: 20px; background: var(--acc); } .tah-red-tgl.is-locked { opacity: .45; cursor: default; } .tah-red-permwarn, .tah-red-lock-note { margin-top: 15px; padding: 11px 13px; border-radius: 13px; background: rgba(233,180,76,.07); border: 1px solid rgba(233,180,76,.22); font-size: 11px; line-height: 1.5; color: #D8C08A; } .tah-red-permwarn { margin: 12px 0 4px; } .tah-red-done { width: 100%; margin-top: 16px; padding: 13px; border: none; border-radius: 13px; background: var(--acc); color: #0B0C0E; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .tah-red-done:disabled { opacity: .6; } /* ── Planes de Batalla ──────────────────────────────────────────────────── La pantalla más densa de La Red: hay que leer de un vistazo en qué día de la ventana estamos, si ya se tiene rival y cuánto queda para que el pacto libre se cierre. Por eso lo primero es un bloque grande con el reloj, y solo después llegan las tarjetas de combate. --acc aquí es el rojo de combate. */ .tah-red-phase { padding: 15px 14px 14px; margin-bottom: 12px; border-radius: 17px; background: radial-gradient(120% 90% at 50% -20%, rgba(var(--accRGB),.14), transparent 65%), var(--red-card); border: 1px solid rgba(var(--accRGB),.26); } .tah-red-phase-eye { font-family: var(--tah-font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--acc); margin-bottom: 7px; } .tah-red-phase h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--tah-text); } .tah-red-phase p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--red-mut); } /* Los cinco días de la ventana. Las tres primeras casillas son del creador; las dos últimas (is-sys) son del sistema, y por eso van rayadas. */ .tah-red-days { display: flex; gap: 5px; margin-top: 14px; } .tah-red-days i { flex: 1; height: 6px; border-radius: 99px; background: #212429; border: 1px solid transparent; } .tah-red-days i.is-sys { background: repeating-linear-gradient(115deg,#212429 0 4px,#2b2f36 4px 8px); } .tah-red-days i.is-done { background: rgba(var(--accRGB),.42); } .tah-red-days i.is-now { background: var(--acc); box-shadow: 0 0 9px rgba(var(--accRGB),.6); } .tah-red-daylab { display: flex; gap: 5px; margin-top: 5px; } .tah-red-daylab span { flex: 1; text-align: center; font-family: var(--tah-font-mono); font-size: 9px; letter-spacing: .05em; color: var(--red-mut2); } .tah-red-clock { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 11px 12px; border-radius: 13px; background: rgba(0,0,0,.4); border: 1px solid var(--red-line); } .tah-red-clock > b { flex: none; font-family: var(--tah-font-mono); font-size: 21px; font-weight: 700; letter-spacing: .04em; color: var(--acc); font-variant-numeric: tabular-nums; } .tah-red-clock > span { font-size: 11px; line-height: 1.45; color: var(--red-mut2); } .tah-red-clock > span b { color: var(--red-mut); font-weight: 600; } /* Las dos casillas: Oficial y Pruebas. */ .tah-red-prog { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; margin-bottom: 8px; border-radius: 14px; background: var(--red-card); border: 1px solid var(--red-line); } .tah-red-prog-l { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--tah-text); } .tah-red-prog-l span { display: block; margin-top: 3px; font-family: var(--tah-font-mono); font-size: 9.5px; letter-spacing: .07em; color: var(--red-mut2); } .tah-red-prog .tah-red-mini { flex: none; text-decoration: none; } /* Tarjeta de combate. */ .tah-red-batt { padding: 13px; margin-bottom: 9px; border-radius: 16px; background: var(--red-card); border: 1px solid var(--red-line); } .tah-red-batt.is-hot { background: radial-gradient(130% 100% at 50% 0%, rgba(var(--accRGB),.12), transparent 70%), var(--red-card); border-color: rgba(var(--accRGB),.4); } .tah-red-batt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; } .tah-red-btype { padding: 3px 8px; border-radius: 7px; background: rgba(var(--accRGB),.13); border: 1px solid rgba(var(--accRGB),.3); color: var(--acc); font-family: var(--tah-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; } .tah-red-btime { font-family: var(--tah-font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--red-mut); text-transform: uppercase; } /* Los dos lados nunca se empujan: cada uno se queda con su mitad y el handle largo se recorta dentro (.tah-rid-at ya lleva el ellipsis). */ .tah-red-vs { display: flex; align-items: center; gap: 9px; } .tah-red-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; overflow: hidden; } .tah-red-side:last-child { justify-content: flex-end; } .tah-red-vsx { flex: none; font-family: var(--tah-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--acc); opacity: .85; } .tah-red-zones { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--red-line); font-family: var(--tah-font-mono); font-size: 9.5px; line-height: 1.6; letter-spacing: .05em; color: var(--red-mut2); } .tah-red-final { margin-top: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(233,180,76,.07); border: 1px solid rgba(233,180,76,.2); font-size: 10.5px; line-height: 1.45; color: #D8C08A; } .tah-red-bcta { width: 100%; margin-top: 10px; padding: 10px; border-radius: 11px; background: none; border: 1px solid rgba(224,87,74,.3); color: #E88B84; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .tah-red-bcta:active { background: rgba(224,87,74,.1); } .tah-red-bcta:disabled { opacity: .5; } /* Reto publicado / retos abiertos. */ .tah-red-reto { display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin-bottom: 8px; border-radius: 15px; background: var(--red-card); border: 1px dashed var(--red-line2); } .tah-red-reto-b { flex: 1; min-width: 0; } .tah-red-reto-n { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; } .tah-red-reto-m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; font-family: var(--tah-font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--red-mut2); text-transform: uppercase; } .tah-red-acc { flex: none; padding: 8px 14px; border-radius: 10px; background: var(--acc); border: none; color: #0B0C0E; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .tah-red-acc:disabled { opacity: .5; } /* Cumplimiento del rival: cuántas de sus batallas se jugaron de verdad. Nunca dice quién ganó — solo si aparece. */ .tah-red-cmp { padding: 2px 7px; border-radius: 6px; border: 1px solid var(--red-line2); color: var(--red-mut); letter-spacing: .06em; } .tah-red-cmp.is-ok { color: #6FD3A2; border-color: rgba(63,190,143,.33); } .tah-red-cmp.is-mid { color: #D8C08A; border-color: rgba(233,180,76,.3); } .tah-red-cmp.is-new { color: var(--acc); border-color: rgba(var(--accRGB),.33); } /* Las reglas: bloques de texto largo, en tono de manual. */ .tah-red-rules { padding: 14px; margin: 14px 0 10px; border-radius: 16px; background: var(--red-card); border: 1px solid var(--red-line); } .tah-red-rules h4 { margin: 0 0 12px; font-family: var(--tah-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; color: var(--red-mut); } .tah-red-rules p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--red-mut); } .tah-red-rules p b { color: var(--tah-text); font-weight: 600; } .tah-red-step { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-top: 1px solid var(--red-line); } .tah-red-step:first-of-type { border-top: none; padding-top: 0; } .tah-red-sn { flex: none; min-width: 30px; padding: 4px 0; border-radius: 8px; background: var(--red-card2); border: 1px solid var(--red-line2); color: var(--red-mut); text-align: center; font-family: var(--tah-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; } .tah-red-sn.is-a { background: rgba(var(--accRGB),.13); border-color: rgba(var(--accRGB),.3); color: var(--acc); } .tah-red-step > div { min-width: 0; } .tah-red-step b { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: var(--tah-text); } .tah-red-step span { font-size: 11.5px; line-height: 1.5; color: var(--red-mut2); } .tah-red-joker { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; margin-bottom: 12px; border-radius: 13px; background: rgba(var(--accRGB),.06); border: 1px solid rgba(var(--accRGB),.2); font-size: 15px; } .tah-red-joker > div { min-width: 0; font-size: 11.5px; line-height: 1.55; color: var(--red-mut); } .tah-red-joker b { color: var(--tah-text); font-weight: 600; } .tah-red-joker b:first-child { display: block; margin-bottom: 2px; } .tah-red-joker.is-spent { opacity: .5; background: none; border-style: dashed; } /* Batallas oficiales dentro de Live now!: dos avatares montados, sin botón de Entrar porque el enlace no es de una sola cuenta. */ .tah-red-pkrow { display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin-bottom: 8px; border-radius: 15px; background: radial-gradient(130% 100% at 50% 0%, rgba(179,63,78,.14), transparent 70%), var(--red-card); border: 1px solid rgba(179,63,78,.4); } .tah-red-pkav { flex: none; display: flex; width: 58px; } .tah-red-pkav span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(150deg,#2a2d33,#1b1d22); border: 1.5px solid var(--tah-live, #E0574A); color: #B9C0CB; font-family: var(--tah-font-mono); font-size: 10px; font-weight: 700; } .tah-red-pkav span:last-child { margin-left: -10px; } .tah-red-pkrow .tah-red-lname { flex-wrap: wrap; gap: 5px; } .tah-red-pkrow .tah-red-vsx { font-size: 9px; } @media (prefers-reduced-motion: reduce) { .tah-red-chan, .tah-red-fab, .tah-red-sheet { transition: none; } .tah-red-typing-dots i { animation: none; } }