/* ════════════════════════════════════════════════════════════════════════════ NUNIO — paleta de marca. ESTE ES EL ÚNICO LUGAR donde viven los colores. Cambiar la marca = cambiar el bloque "TINTA DE MARCA" de acá abajo. Nada más. Los colores salen de los píxeles del logo, no de una estimación: el degradado del isotipo recorre 204° (azul) → 274° (púrpura) con un acento turquesa a 188°. ── POR QUÉ HAY DOS JUEGOS DE VALORES ───────────────────────────────────────── Ningún color sirve para texto en los dos fondos. Medido con WCAG 2.1: violeta #391af6 → 7.92:1 sobre claro (AAA) · 2.39:1 sobre oscuro (ilegible) índigo #8b93ff → 2.72:1 sobre claro (ilegible) · 6.94:1 sobre oscuro (AA) Por eso el mismo token vale distinto según el fondo. El RELLENO de un botón sí puede ser el mismo: lo que importa ahí es el blanco encima (7.92:1). ── EL VERDE NO ES DECORACIÓN ───────────────────────────────────────────────── El verde queda reservado a ESTADO: número conectado, bot activo, semáforos. Un "conectado" que deja de ser verde miente. Por eso los tokens de estado están separados de los de marca, y ningún componente decorativo puede usarlos. ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── TINTA DE MARCA (el degradado del logo, tal cual) ──────────────────── */ --nu-azul: #0198fa; --nu-azul-hondo: #0363fa; --nu-indigo: #1635fa; --nu-violeta: #391af6; --nu-violeta-suave: #6915fa; --nu-purpura: #950dfa; --nu-turquesa: #02d0ee; --nu-noche: #0d112b; --nu-degradado: linear-gradient(135deg, #0198fa 0%, #391af6 55%, #950dfa 100%); --nu-degradado-suave: linear-gradient(135deg, rgba(1,152,250,.14), rgba(149,13,250,.14)); /* ── USO SOBRE FONDO CLARO (el defecto: 11 de las 15 pantallas son claras) ─ */ --marca: #391af6; /* relleno de botón primario */ --marca-fuerte: #2a12c4; /* su hover */ --marca-texto: #391af6; /* texto y enlaces — 7.92:1 AAA */ --marca-borde: #391af6; --marca-tenue: rgba(57, 26, 246, .10); /* fondo de pestaña activa */ --marca-tenue-2: rgba(57, 26, 246, .05); --marca-encima: #ffffff; /* lo que va ENCIMA del relleno — 7.92:1 */ --marca-acento: #0e7490; /* turquesa legible en claro — 5.36:1 */ --marca-anillo: rgba(57, 26, 246, .28); /* foco */ /* ── ESTADO (significado, nunca decoración) ─────────────────────────────── El punto/pill es RELLENO: ahí el verde de WhatsApp se ve perfecto. El texto verde sobre claro daba 1.98:1 —ilegible— y pasa a 5.02:1 sin dejar de ser verde. */ --estado-ok: #15803d; /* texto — 5.02:1 (antes #25D366: 1.98:1) */ --estado-ok-punto: #25D366; /* relleno del punto/pill: el verde de siempre */ --estado-ok-tenue: rgba(37, 211, 102, .12); --estado-alerta: #b45309; /* texto — 5.02:1 (antes #f59e0b: 2.15:1) */ --estado-alerta-punto: #f59e0b; --estado-alerta-tenue: rgba(245, 158, 11, .12); --estado-error: #dc2626; --estado-error-punto: #ef4444; --estado-error-tenue: rgba(239, 68, 68, .12); --estado-neutro: #6b7280; --estado-neutro-punto: #9ca3af; } /* ── USO SOBRE FONDO OSCURO ──────────────────────────────────────────────── Lo aplican las 4 pantallas oscuras (dashboard, costos, numeros, plataforma) marcando . Las claras nunca reciben esta clase. El `:not(.light)` evita tocar una sola línea de JavaScript: el interruptor de tema que ya existe pone y saca la clase `light` en el , y con esto los valores oscuros se desactivan solos cuando el usuario elige claro. Un token de tema que necesita que alguien acuerde de llamar a una función termina desincronizado. */ :root.oscuro:not(.light) { --marca: #5b34ff; /* algo más claro: sobre #0f1115 el relleno se despega */ --marca-fuerte: #7856ff; --marca-texto: #8b93ff; /* 6.94:1 sobre el fondo oscuro */ --marca-borde: #6b52ff; --marca-tenue: rgba(91, 52, 255, .18); --marca-tenue-2: rgba(91, 52, 255, .09); --marca-encima: #ffffff; --marca-acento: #02d0ee; /* acá el turquesa sí luce: 10.13:1 */ --marca-anillo: rgba(139, 147, 255, .35); --estado-ok: #25D366; /* sobre oscuro el verde de WhatsApp da 8.79:1 */ --estado-ok-punto: #25D366; --estado-ok-tenue: rgba(37, 211, 102, .16); --estado-alerta: #f59e0b; /* 8.11:1 sobre oscuro */ --estado-alerta-punto: #f59e0b; --estado-alerta-tenue: rgba(245, 158, 11, .16); --estado-error: #ef4444; --estado-error-punto: #ef4444; --estado-error-tenue: rgba(239, 68, 68, .16); --estado-neutro: #9ca3af; --estado-neutro-punto: #9ca3af; } /* ════════════════════════════════════════════════════════════════════════════ MARCA EN PANTALLA ════════════════════════════════════════════════════════════════════════════ */ /* El isotipo del menú lateral. Reemplaza al cuadrado verde con una letra dentro. */ .logo-icon, .nu-isotipo { background: var(--nu-degradado) !important; color: #fff; } .logo-icon img, .nu-isotipo img { width: 76%; height: 76%; object-fit: contain; display: block; } /* Logo del login: grande y centrado. */ .nu-logo-login { display: block; margin: 0 auto 6px; width: min(260px, 62vw); height: auto; } /* El logotipo completo trae "nunio" en BLANCO. Sobre fondo claro sería invisible, así que hay dos archivos y se muestra el que corresponde al fondo. */ .nu-logo-oscuro { display: none; } :root.oscuro:not(.light) .nu-logo-claro { display: none; } :root.oscuro:not(.light) .nu-logo-oscuro { display: block; } /* Logo chico del encabezado. */ .nu-logo-barra { height: 26px; width: auto; display: block; } @media (max-width: 640px) { .nu-logo-login { width: min(210px, 70vw); } } /* ── NOCHE — UNA SOLA DEFINICIÓN PARA TODO EL CRM ──────────────────────────── Antes cada pantalla oscura llevaba su paleta COPIADA LITERAL: costos, dashboard, numeros e integraciones tenían los mismos siete hex escritos cuatro veces, y plataforma tenía otros distintos. Por eso el menú se veía azul y el contenido negro: el menú usaba #1a1a2e y el fondo #0f1115, dos colores que nadie había decidido juntos. Ahora el fondo ES el azul del menú y todo lo demás se deriva de él. Cambiarlo acá lo cambia en todas: si aparece una pantalla nueva, que use estas variables. */ :root { --noche-fondo: #1a1a2e; /* el azul del menú lateral — ahora también el fondo */ --dia-titulo: #1a1a2e; /* títulos de día: el azul de la marca, 15.8:1 */ --dia-fondo: #f5f5f5; /* la contraparte: el fondo de día, con nombre propio para que las muestras de Configuración lo puedan enseñar */ --noche-alto: #15152a; /* barra superior: un punto más honda que el fondo */ --noche-panel: #22223d; /* tarjetas — se despegan del fondo sin gritar */ --noche-panel2: #2a2a47; /* superficies secundarias: campos, botones */ --noche-linea: #343453; /* bordes */ --noche-sep: #2e2e4a; /* separadores finos */ --noche-hondo: #141426; /* zonas hundidas */ /* El texto también es paleta. Estaba escrito a mano en style.css y era el último color de la noche que vivía fuera de acá. */ --noche-texto: #e9e9f2; /* texto principal sobre fondo oscuro */ --noche-texto2: #c6c6d8; /* texto secundario */ --noche-tenue: #9a9ab8; /* apoyos y ayudas */ --noche-tenue2: #9494b0; /* lo más apagado — el #7d7d9c daba 3.45:1 sobre las tarjetas */ --noche-titulo: #f4f4fc; /* títulos de noche: 13:1, destacan de verdad */ --noche-acento: #b4a0ff; /* el morado, cuando hace de TEXTO sobre oscuro */ } /* ── MENÚ EN PANTALLA ANGOSTA ──────────────────────────────────────────────────────────── Abajo de 900 px la barra lateral SALE DEL FLUJO y se abre por encima del contenido con el botón ☰. Antes de esto el teléfono quedaba sin navegación: 10 pantallas dejaban la barra fija comiéndose 230 de 375 px y las otras 4 la escondían sin dar ninguna forma de abrirla. En escritorio no cambia nada: el botón nace en display:none y solo aparece dentro de la media query. */ .nu-menu-btn{display:none;background:none;border:none;font:inherit;font-size:23px;line-height:1; cursor:pointer;color:var(--ui-titulo);padding:2px 8px 2px 0;flex-shrink:0} .nu-menu-btn:hover{color:var(--marca)} .nu-menu-fondo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1150} @media(max-width:900px){ .nu-menu-btn{display:block} /* La barra pasa a estar por encima y arrancada a la izquierda. Se mueve con transform y no con display, así conserva el foco y la transición. ⚠️ EL SELECTOR ES «body .sidebar» A PROPÓSITO, no «.sidebar». Cuatro pantallas (dashboard, costos, integraciones, numeros) redefinen .sidebar COMPLETA en su