/* ============================================================================= MUNDO CONAN · CHAT v2 ----------------------------------------------------------------------------- Hoja de estilos independiente del chat. Todo va bajo el prefijo .mcc- para que no choque con nada de style.css (el chat viejo usaba .msg, .chat-btn…, clases demasiado genéricas que se pisaban con el resto de la web). Los colores salen de variables propias que heredan del tema global de la web (atributo data-theme en ), así el chat cambia de claro a oscuro solo. ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── 1. TOKENS Van en :root, NO en .mcc. Es importante: los modales, los avisos flotantes, la ficha de usuario, el menú de reacciones y el visor de imágenes se cuelgan de , fuera del contenedor del chat. Si los tokens vivieran en .mcc, ahí fuera no existirían y `background: var(--mcc-bg-raised)` se quedaría sin valor: el fondo saldría transparente y el texto ilegible. ────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; --mcc-bg: #ffffff; --mcc-bg-sunken: #f4f6fb; --mcc-bg-raised: #ffffff; --mcc-bg-hover: #eef1f8; --mcc-bg-own: #eaf0ff; --mcc-text: #1c2333; --mcc-text-soft: #4a5568; /* Sobre blanco, un gris más claro que este no llega al contraste mínimo para textos pequeños (horas, contadores, etiquetas). */ --mcc-text-faint: #6b7690; --mcc-border: rgba(16, 25, 53, 0.10); --mcc-border-strong: rgba(16, 25, 53, 0.18); --mcc-brand: #4f7cff; --mcc-brand-ink: #2c5ae0; --mcc-accent: #e63955; --mcc-gold: #e9a527; /* Verde y ámbar oscurecidos para el modo claro: los tonos vivos que se usan en oscuro se vuelven ilegibles sobre fondo blanco. */ --mcc-green: #0d7d50; --mcc-warn: #b3700c; --mcc-spoiler-bg: #cfd6e6; --mcc-spoiler-bg-hover: #bcc5da; --mcc-staff-bg: rgba(233, 165, 39, .10); --mcc-staff-bg-hover: rgba(233, 165, 39, .17); --mcc-danger: #d93450; --mcc-shadow-sm: 0 2px 8px rgba(23, 32, 66, 0.07); --mcc-shadow: 0 8px 28px rgba(23, 32, 66, 0.12); --mcc-shadow-lg: 0 22px 60px rgba(23, 32, 66, 0.22); --mcc-radius: 18px; --mcc-radius-sm: 11px; --mcc-radius-pill: 999px; --mcc-font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif; --mcc-font-title: 'Outfit', 'Nunito', system-ui, sans-serif; --mcc-header: linear-gradient(120deg, #101935 0%, #1e2c66 55%, #3a2b6e 100%); --mcc-stream-h: clamp(360px, 52vh, 620px); } [data-theme="dark"] { color-scheme: dark; --mcc-bg: #131a33; --mcc-bg-sunken: #0d1226; --mcc-bg-raised: #182144; --mcc-bg-hover: #1e2851; --mcc-bg-own: #1b2a5c; --mcc-text: #e8ecf8; --mcc-text-soft: #b6c0dd; --mcc-text-faint: #7c88ac; --mcc-border: rgba(255, 255, 255, 0.09); --mcc-border-strong: rgba(255, 255, 255, 0.18); --mcc-brand: #7aa2ff; --mcc-brand-ink: #9ab8ff; --mcc-accent: #ff5c77; --mcc-gold: #f5c04e; --mcc-green: #3ad395; --mcc-warn: #f0a03a; --mcc-spoiler-bg: #333c5e; --mcc-spoiler-bg-hover: #414c73; --mcc-staff-bg: rgba(245, 192, 78, .09); --mcc-staff-bg-hover: rgba(245, 192, 78, .16); --mcc-danger: #ff6b83; --mcc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --mcc-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --mcc-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.6); --mcc-header: linear-gradient(120deg, #0a0f22 0%, #16204d 55%, #2a1f5e 100%); } /* ───────────────────────────────────────────────────────────────────────────── 2. CONTENEDOR ────────────────────────────────────────────────────────────────────────── */ .mcc, .mcc *, .mcc-modal *, .mcc-card * { box-sizing: border-box; } /* Los