/* ============================================================================ OPER1 — tema del panel ============================================================================ Identidad de OPER1, la empresa que fabrica el panel. Es el marco: colores, tipografía y espaciado. El cliente (el festival) solo aparece con su nombre y, si lo hay, su logo, en la cabecera; sus datos NO están aquí: - nombre, fechas y ciudad del evento: netlify/functions/lib/festival-config.js (los usa el servidor para los cálculos y llegan al panel con los datos); - logo del cliente y rótulo corto: public/cliente.js. Este archivo se reutiliza tal cual en el panel de otro festival. Dos temas, completos: :root CLARO, el de por defecto. :root[data-tema="oscuro"] OSCURO, la versión negativa de la marca. El panel arranca en OSCURO: index.html trae data-tema="oscuro" en y solo lo quita si ese navegador eligió el claro con el enlace discreto de la cabecera, que pone o quita el atributo y lo recuerda en ese navegador. Dos capas: 1. --oper-*: la paleta de marca, con sus nombres. 2. Papeles: qué es cada cosa en el panel (--fondo, --panel, --texto...). El CSS del panel usa SIEMPRE esta capa. Reglas de uso: - Naranja señal: acento, nunca fondo ni color dominante. Como mucho un elemento destacado por pantalla; en los gráficos, solo el punto actual. - Verde, ámbar y rojo: solo estados (bien, atención, alerta). Nunca decoración. Las incidencias van en ámbar o rojo, nunca en naranja. - Nada de degradados, sombras marcadas ni fondos de tarjeta saturados. El contraste de los dos temas lo comprueba pruebas/contraste.js. Valores ajustados por contraste respecto a la paleta de marca (tema claro): gris etiqueta en texto #8A93A6 → #686E7D (rejilla y líneas: #8A93A6) verde #2E9E5B → #247D48 ámbar #D99A00 → #8F6600 rojo #D64545 → #C33F3F (en el oscuro, #DD6363) En elementos gráficos (barras, rellenos, puntos, bordes) los estados usan variables propias: verde y rojo de marca; ámbar #D99A00 → #B68100. ========================================================================== */ :root { /* --- 1. Paleta OPER1 --- */ --oper-papel: #FAF8F3; --oper-hueso: #F4F1EA; --oper-blanco: #FFFFFF; --oper-linea: #E6E2D8; --oper-negro: #0E1116; --oper-gris-texto: #5A6170; --oper-gris-etiqueta: #8A93A6; --oper-senal: #FF5A1F; /* naranja señal */ --oper-verde: #2E9E5B; --oper-ambar: #D99A00; --oper-rojo: #D64545; /* --- Tipografía --- */ --fuente-principal: 'Space Grotesk', Arial, Helvetica, sans-serif; --fuente-mono: 'IBM Plex Mono', "Courier New", monospace; --mono-espaciado: 0.06em; /* letter-spacing de la mono (máximo 0.08em), siempre en mayúsculas */ --rotulo-espaciado: 0.06em; /* rótulos en Space Grotesk 700, en mayúsculas */ --rotulo-tamano: 13px; /* rótulos de tarjeta, sección y KPI; tablas, 12px */ --cifra-espaciado: -0.02em; /* las cifras, un punto más juntas */ --cifra-grande: 40px; /* cifras destacadas de las tarjetas */ --cifra-texto: 32px; /* AJUSTE: valor destacado que es texto ("Tras el evento") */ --cifra-grande-espaciado: -0.03em; --cuerpo: 14px; --interlineado: 1.6; /* Tamaño pequeño, el mínimo del panel: nunca por debajo de 12px. Lo usan la mono (solo línea de cliente, ejes y leyendas de los gráficos y pie) y los rótulos pequeños en Space Grotesk (tablas, tramos, días). */ --mono-pequena: 12px; /* Texto que hay que leer (frases, descripciones). */ --texto-lectura: 15px; --interlineado-lectura: 1.5; /* --- Espaciado y forma --- */ --radio: 5px; --hueco: 16px; /* entre tarjetas */ --relleno-tarjeta: 20px 22px; /* el mismo en todas las tarjetas */ --relleno-plegable: 14px; /* dentro de un desplegable de detalle; 8px en el móvil */ /* Casi imperceptible: solo separa la tarjeta del fondo. */ --sombra-tarjeta: 0 1px 2px rgba(14, 17, 22, 0.04); /* --- 2. Papeles: tema claro --- */ /* Superficies. Fondo hueso y tarjetas blancas: la tarjeta se separa del fondo por el tono, no por una línea más gruesa ni por la sombra. */ --fondo: var(--oper-hueso); --panel: var(--oper-blanco); --banda: var(--oper-hueso); /* zonas destacadas */ --panel-2: var(--oper-hueso); /* cabecera de tabla, recuadro del gráfico */ --panel-3: var(--oper-hueso); /* encabezado de familia */ --subtotal: #FBFAF6; --pista: #DCD8CC; /* fondo de las barras */ --borde: var(--oper-linea); --rejilla: #EEEBE3; /* rejilla de los gráficos, muy tenue */ /* Texto */ --texto: var(--oper-negro); /* cifras y titulares */ --lectura: #2B303A; /* frases y textos descriptivos: casi negro */ --suave: var(--oper-gris-texto); /* texto secundario */ --rotulo: var(--oper-gris-texto); /* rótulos de tarjeta, de sección y de KPI */ --tenue: #686E7D; /* notas al pie (gris etiqueta oscurecido) */ --etiqueta: #686E7D; /* solo lo secundario: ejes, notas, "CLIENTE" */ /* Cabecera: una banda blanca, sin color de marca del cliente. */ --cabecera-1: var(--oper-blanco); --cabecera-2: var(--oper-blanco); --sobre-marca: var(--oper-negro); --sobre-marca-suave: var(--oper-gris-texto); --sobre-marca-tenue: #686E7D; --sobre-marca-linea: var(--oper-linea); --punto-marca: var(--oper-senal); /* Botón principal: negro con texto hueso. El naranja queda libre. */ --boton-fondo: var(--oper-negro); --sobre-boton: var(--oper-hueso); --acento: var(--oper-negro); /* barras, enlaces de acción, serie actual */ --sobre-acento: var(--oper-hueso); --senal: var(--oper-senal); /* el único naranja: punto actual, el "1" del logo */ --sombra: rgba(14, 17, 22, 0.12); /* Cifras: en negro. El color, solo si expresa un estado. */ --cifra-entradas: var(--texto); --cifra-dinero: var(--texto); --cifra-aviso: var(--texto); /* Gráficos */ --serie-actual: var(--oper-negro); /* esta edición, trazo 2px */ --serie-anterior: var(--oper-gris-etiqueta); /* la anterior, discontinua */ --hito: var(--oper-gris-texto); /* líneas de hito (preparado; hoy no hay datos de hitos) */ --ingresos: var(--oper-negro); --eje-ingresos: #686E7D; --media: var(--oper-gris-texto); --anterior: var(--oper-gris-etiqueta); --procedencia: var(--oper-negro); /* barras de procedencia, país y edad */ --edad: var(--oper-negro); /* Estados: solo bien, atención o alerta. Dos versiones de cada uno: - de TEXTO (4,5:1): --positivo, --ambar, --negativo / --rojo; - de GRÁFICO (3:1, para barras, rellenos, puntos y bordes): --verde-grafico, --ambar-grafico, --rojo-grafico. En el gráfico, el valor de marca si llega a 3:1 sobre blanco (el verde y el rojo); el ámbar de marca se queda en 2,45:1 y se oscurece lo justo. */ --positivo: #247D48; --negativo: #C33F3F; --rojo: #C33F3F; --rojo-bg: #FDF4F4; --rojo-bd: #EDC2C2; --ambar: #8F6600; --ambar-bg: #FBF3DD; --ambar-bd: #E8D29A; --verde-grafico: var(--oper-verde); /* #2E9E5B, 3,4:1 sobre blanco */ --ambar-grafico: #B68100; /* #D99A00 −16 %, 3,4:1 sobre blanco */ --rojo-grafico: var(--oper-rojo); /* #D64545, 4,4:1 sobre blanco */ --neutro-grafico: var(--oper-gris-etiqueta); /* punto de frase neutra; #8A93A6, 3,2:1 sobre blanco */ /* --- Color de marca en el panel --- Naranja = marca y progreso. Cada uso, en su variable: para quitarlo o cambiarlo basta una línea. */ --marca-seccion: var(--oper-senal); /* AJUSTE (marca de sección): barra de 3px; quitar: transparent */ --unidad-color: var(--oper-senal); /* AJUSTE (unidad en naranja): € y % de las cifras grandes; quitar: inherit */ --unidad-tamano: 0.75em; /* AJUSTE (unidad en naranja): quitar: 1em */ --barra-semana-actual: var(--oper-senal); /* AJUSTE (semana en curso en naranja): quitar: var(--serie-actual) */ /* Barras. Aforo de jornada: cerca del lleno es bueno. Cupo de producto: cerca del final es aviso. Los umbrales, en % (los lee el JS). */ --barra-progreso: var(--oper-senal); /* AJUSTE (barras): relleno de aforo y de cupo; quitar: var(--acento) */ --barra-aforo-lleno: var(--verde-grafico); /* AJUSTE (barras de aforo): desde el umbral */ --umbral-aforo-lleno: 90; /* AJUSTE (barras de aforo): % desde el que va en verde */ --barra-cupo-aviso: var(--ambar-grafico); /* AJUSTE (barras de cupo): desde el umbral */ --umbral-cupo-aviso: 80; /* AJUSTE (barras de cupo): % desde el que va en ámbar */ --barra-cupo-completo: var(--verde-grafico); /* AJUSTE (barras de cupo): al 100 % */ --barra-semana-dia: var(--neutro-grafico); /* AJUSTE (día de la semana con barras): barras de cada día */ --barra-semana-mejor: var(--oper-senal); /* AJUSTE (día de la semana con barras): el mejor día; quitar: var(--neutro-grafico) */ --aviso-tecnico: var(--ambar); /* AJUSTE (avisos técnicos en ámbar): texto de los avisos; quitar: var(--suave) */ } /* --- Papeles: tema oscuro (versión negativa de la marca) --- */ :root[data-tema="oscuro"] { --fondo: var(--oper-negro); --panel: #171B22; --banda: #1E232C; --panel-2: #1E232C; --panel-3: #1E232C; --subtotal: #1A1E26; --pista: #343A46; --borde: #262B35; --rejilla: #222731; --texto: var(--oper-hueso); --lectura: #DCDFE6; /* frases: casi hueso, como el casi negro del claro */ --suave: #A3AAB8; --rotulo: #A3AAB8; /* el gris texto del tema oscuro */ --tenue: var(--oper-gris-etiqueta); --etiqueta: var(--oper-gris-etiqueta); --sombra-tarjeta: none; --cabecera-1: #171B22; --cabecera-2: #171B22; --sobre-marca: var(--oper-hueso); --sobre-marca-suave: #A3AAB8; --sobre-marca-tenue: var(--oper-gris-etiqueta); --sobre-marca-linea: #343A46; --boton-fondo: var(--oper-hueso); --sobre-boton: var(--oper-negro); --acento: var(--oper-hueso); --sobre-acento: var(--oper-negro); --sombra: rgba(0, 0, 0, 0.5); --serie-actual: var(--oper-hueso); --serie-anterior: var(--oper-gris-etiqueta); --hito: #A3AAB8; --ingresos: var(--oper-hueso); --eje-ingresos: var(--oper-gris-etiqueta); --media: #A3AAB8; --procedencia: var(--oper-hueso); --edad: var(--oper-hueso); --positivo: var(--oper-verde); --negativo: #DD6363; --rojo: #DD6363; --rojo-bg: #2A1719; --rojo-bd: #5A2A2E; --ambar: var(--oper-ambar); --ambar-bg: #2A2310; --ambar-bd: #574612; /* Sobre el fondo oscuro, los tres de marca pasan tal cual. */ --verde-grafico: var(--oper-verde); --ambar-grafico: var(--oper-ambar); --rojo-grafico: var(--oper-rojo); --neutro-grafico: var(--oper-gris-etiqueta); }