/* ══════════════════════════════════════════════════════════════ Aureal IAUI · TOKENS DE TEMA Este fichero es el único sitio donde se definen colores y medidas. style.css nunca escribe un color literal: solo consume estos nombres. Cómo se usa: · Claro / oscuro → · Color de marca → Ambos se combinan y se guardan en localStorage. ══════════════════════════════════════════════════════════════ */ /* ─────────── 1. Medidas (comunes a todos los temas) ─────────── */ :root { --iaui-radius-sm: 7px; --iaui-radius-md: 9px; --iaui-radius-lg: 16px; --iaui-sidebar-width: 280px; --iaui-sidebar-rail: 52px; /* ancho plegado */ --iaui-sidebar-min: 200px; --iaui-sidebar-max: 520px; --iaui-content-max: 780px; /* Las de emoji van AL FINAL: el navegador sólo baja a ellas para los caracteres que las de texto no tienen. Sin nombrarlas, Chrome y Firefox en Linux (y algún Windows) sacaban los emojis en blanco y negro o como cuadros. */ --iaui-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --iaui-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, var(--iaui-font-emoji); --iaui-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace, var(--iaui-font-emoji); --iaui-font-size: 15px; } /* ─────────── 2. Tema claro (por defecto) ─────────── */ :root, [data-bs-theme="light"] { --iaui-bg-app: #ffffff; /* zona de chat */ --iaui-bg-side: #f4f4f5; /* panel lateral */ --iaui-bg-hover: #e8e8ea; --iaui-bg-active: #e0e0e4; --iaui-bg-bubble: #f4f4f5; /* mensaje del usuario */ --iaui-bg-code: #f4f4f5; --iaui-border: #e4e4e7; --iaui-text: #18181b; --iaui-text-muted: #71717a; --iaui-text-invert: #ffffff; --iaui-online: #22c55e; --iaui-warn: #d97706; --iaui-danger: #dc2626; --iaui-shadow: 0 1px 3px rgba(0,0,0,.06); --iaui-tooltip-bg: #1f1f23; --iaui-tooltip-text:#ffffff; --iaui-close-filter: none; } /* ─────────── 3. Tema oscuro ─────────── */ [data-bs-theme="dark"] { --iaui-bg-app: #0f0f11; --iaui-bg-side: #171719; --iaui-bg-hover: #232326; --iaui-bg-active: #2c2c31; --iaui-bg-bubble: #232326; --iaui-bg-code: #1b1b1e; --iaui-border: #2a2a2e; --iaui-text: #e8e8ea; --iaui-text-muted: #8f8f98; --iaui-text-invert: #ffffff; --iaui-online: #4ade80; --iaui-warn: #fbbf24; --iaui-danger: #f87171; --iaui-shadow: 0 1px 3px rgba(0,0,0,.4); --iaui-tooltip-bg: #3f3f46; --iaui-tooltip-text:#ffffff; --iaui-close-filter: invert(1) grayscale(1) brightness(2); } /* ─────────── 4. Colores de marca ─────────── Cada acento define tres valores: el color, su versión suave (fondos tenues) y el degradado del avatar. Añadir uno nuevo es copiar un bloque y cambiar los tres. */ :root, [data-accent="indigo"] { --iaui-accent: #4f46e5; --iaui-accent-soft: #eef2ff; --iaui-accent-grad: linear-gradient(135deg, #4f46e5, #a855f7); } [data-accent="esmeralda"]{ --iaui-accent: #059669; --iaui-accent-soft: #ecfdf5; --iaui-accent-grad: linear-gradient(135deg, #059669, #14b8a6); } [data-accent="ambar"] { --iaui-accent: #d97706; --iaui-accent-soft: #fffbeb; --iaui-accent-grad: linear-gradient(135deg, #d97706, #f59e0b); } [data-accent="rosa"] { --iaui-accent: #db2777; --iaui-accent-soft: #fdf2f8; --iaui-accent-grad: linear-gradient(135deg, #db2777, #f472b6); } [data-accent="pizarra"] { --iaui-accent: #475569; --iaui-accent-soft: #f1f5f9; --iaui-accent-grad: linear-gradient(135deg, #475569, #64748b); } /* En oscuro los acentos se aclaran para mantener el contraste sobre fondo negro. */ [data-bs-theme="dark"][data-accent="indigo"], [data-bs-theme="dark"]:not([data-accent]) { --iaui-accent: #818cf8; --iaui-accent-soft: #26263a; } [data-bs-theme="dark"][data-accent="esmeralda"] { --iaui-accent: #34d399; --iaui-accent-soft: #16302a; } [data-bs-theme="dark"][data-accent="ambar"] { --iaui-accent: #fbbf24; --iaui-accent-soft: #322616; } [data-bs-theme="dark"][data-accent="rosa"] { --iaui-accent: #f472b6; --iaui-accent-soft: #331d29; } [data-bs-theme="dark"][data-accent="pizarra"] { --iaui-accent: #94a3b8; --iaui-accent-soft: #22272e; } /* ─────────── 5. Puente con Bootstrap ─────────── Para que .btn-primary, los enlaces y el foco sigan el acento. */ :root { --bs-primary: var(--iaui-accent); --bs-border-color: var(--iaui-border); --bs-body-font-family: var(--iaui-font); } .btn-primary { --bs-btn-bg: var(--iaui-accent); --bs-btn-border-color: var(--iaui-accent); --bs-btn-color: var(--iaui-text-invert); --bs-btn-hover-bg: color-mix(in srgb, var(--iaui-accent) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--iaui-accent) 85%, black); --bs-btn-hover-color: var(--iaui-text-invert); --bs-btn-active-bg: color-mix(in srgb, var(--iaui-accent) 74%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--iaui-accent) 74%, black); } .form-control:focus { border-color: var(--iaui-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--iaui-accent) 22%, transparent); } /* Iconos de capacidades. Van en theme.css y no en style.css porque el PANEL carga admin.css, no style.css: ahí las reglas no llegaban y los SVG salían a tamaño natural, enormes. theme.css lo cargan las dos páginas. Sprite incrustado (lucide, ISC). Son SVG con currentColor, así que el color lo pone la clase y no hace falta un dibujo distinto por estado: «si» en el color de acento y «no» apagado. Cuando el «no» importa —un proveedor que no sirve herramientas— se usa además el dibujo TACHADO (ic-sin-herramientas), para que se distinga sin depender del color ni de la opacidad: hay gente que no los distingue. */ .ic { width: 14px; height: 14px; vertical-align: -2px; flex: none; } .ic.si { color: var(--iaui-accent); } .ic.no { color: var(--iaui-text-muted); opacity: .45; } .iconos { display: inline-flex; align-items: center; gap: 5px; }