/* plentia — colores del producto. ORIGEN: `marca/07-web-claude-code/tokens.css` del pack de marca v1 (septiembre de 2026). Los valores de marca, de concepto y de estado salen de ahí tal cual; aquí solo se añaden las variables de superficie que el panel necesita y que el pack no trae (sombras, raíles, globos). Claro por defecto. Oscuro con . Si el usuario no ha elegido, se sigue prefers-color-scheme (ver ui.js). NINGÚN color fuera de este archivo. Reglas del pack que mandan sobre cualquier otra cosa: - El símbolo del logo NO cambia de color nunca: cara --brand-green, canto --brand-edge. - El ámbar --accent es SOLO el botón principal del PANEL («Nueva factura»). En ningún otro sitio: ni web, ni acceso, ni sección activa (decisión de Unai, bloque 5). Encima va --on-accent, nunca blanco: el ámbar con blanco da 2,76:1 y no llega a la AA. - El verde significa dinero a favor y marca, nunca decoración. - Cada concepto (ventas, ads, gastos, fiscalidad, envíos, te queda) mantiene su color en el menú, en la gráfica y en el informe. Contrastes medidos (WCAG 2.1), todos por encima del 4,5:1 que pide la AA: --accion #13804A + blanco ......... 4,98:1 --accion-fuerte #0F6A3D + blanco .. 6,67:1 --accent #D98A2B + --on-accent .... 6,73:1 ámbar oscuro #E8A54B + --on-accent 8,75:1 --text #0E1417 sobre --bg #F4F3EF . 16,72:1 --text #F2F2F0 sobre #0B1114 ..... 16,96:1 */ :root{ /* --- marca: estos cuatro no cambian jamás, ni en oscuro --- */ --brand-green:#1FA463; --brand-edge:#13804A; --tinta:#0E1417; --crema:#F4F3EF; /* --- superficies --- */ --bg:#F4F3EF; --side:#ECEAE4; --glow:rgba(31,164,99,.05); --surface:#FFFFFF; --surface-hi:#FFFFFF; --surface-2:#ECEAE4; --border:#DEDBD3; --shadow:0 1px 2px rgba(14,20,23,.06),0 6px 20px rgba(14,20,23,.06); --track:#ECEAE4; --track-2:#BDB9AF; --text:#0E1417; --text-2:#5B6468; --text-3:#8F979A; /* --- acción --- */ --accent:#D98A2B; --accent-soft:#FBEBD5; --on-accent:#1A1206; --accion:#13804A; --accion-fuerte:#0F6A3D; --on-accion:#FFFFFF; /* --- estado --- */ --pos:#1FA463; --pos-soft:#DDF3E7; --neg:#E0483A; --neg-soft:#FBE1DE; --warn:#C99A06; --warn-soft:#FBF0C8; --info:#2F7FE0; --info-soft:#DCEAFB; /* --- concepto: el mismo color en el menú, en la gráfica y en el informe --- */ --d-ventas:#2F7FE0; --d-ads:#7C5CE6; --d-gastos:#D9558F; --d-iva:#7E948F; --d-envios:#159C92; --d-queda:#1FA463; /* --- detalles --- */ --dot:rgba(14,20,23,.30); --spot:rgba(31,164,99,.05); --tip-bg:rgba(14,20,23,.78); --tip-text:#F4F3EF; --tip-2:rgba(244,243,239,.62); --tip-up:#1FA463; --tip-dn:#E0483A; --tip-line:rgba(255,255,255,.1); --tip-edge:rgba(255,255,255,.08); --tip-shadow:rgba(0,0,0,.18); /* --- tipografía (pack, página 6) --- Inter para titulares, texto y CIFRAS, siempre con tabular-nums. Space Grotesk para etiquetas de gráficas y códigos: seguimiento, SKU, NIF, nº de factura. JetBrains Mono está retirada de la web y del panel. */ --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --etiqueta:"Space Grotesk","Inter",system-ui,sans-serif; /* `--mono` se llama así por historia: hoy son las etiquetas y los códigos, en Space Grotesk. */ --mono:"Space Grotesk","Inter",system-ui,sans-serif; --maquina:"Space Grotesk","Inter",system-ui,sans-serif; color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0B1114; --side:#0B1114; --glow:rgba(61,220,132,.08); --surface:#121A1E; --surface-hi:#1A2429; --surface-2:#1A2429; --border:#26323A; --shadow:none; --track:#1A2429; --track-2:#3A474E; --text:#F2F2F0; --text-2:#9AA5A8; --text-3:#5F6B6F; --accent:#E8A54B; --accent-soft:#3A2A14; --on-accent:#1A1206; --accion:#13804A; --accion-fuerte:#0F6A3D; --on-accion:#FFFFFF; --pos:#3DDC84; --pos-soft:#133524; --neg:#FF6A5C; --neg-soft:#3E1C19; --warn:#F7D154; --warn-soft:#3A3212; --info:#6CB4FF; --info-soft:#152B45; --d-ventas:#6CB4FF; --d-ads:#A78BFA; --d-gastos:#F28FB8; --d-iva:#9FB1AE; --d-envios:#4FD1C5; --d-queda:#3DDC84; --dot:rgba(242,242,240,.26); --spot:rgba(232,165,75,.06); --tip-bg:rgba(26,36,41,.78); --tip-text:#F2F2F0; --tip-2:rgba(242,242,240,.6); --tip-up:#3DDC84; --tip-dn:#FF6A5C; color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#0B1114; --side:#0B1114; --glow:rgba(61,220,132,.08); --surface:#121A1E; --surface-hi:#1A2429; --surface-2:#1A2429; --border:#26323A; --shadow:none; --track:#1A2429; --track-2:#3A474E; --text:#F2F2F0; --text-2:#9AA5A8; --text-3:#5F6B6F; --accent:#E8A54B; --accent-soft:#3A2A14; --on-accent:#1A1206; --accion:#13804A; --accion-fuerte:#0F6A3D; --on-accion:#FFFFFF; --pos:#3DDC84; --pos-soft:#133524; --neg:#FF6A5C; --neg-soft:#3E1C19; --warn:#F7D154; --warn-soft:#3A3212; --info:#6CB4FF; --info-soft:#152B45; --d-ventas:#6CB4FF; --d-ads:#A78BFA; --d-gastos:#F28FB8; --d-iva:#9FB1AE; --d-envios:#4FD1C5; --d-queda:#3DDC84; --dot:rgba(242,242,240,.26); --spot:rgba(232,165,75,.06); --tip-bg:rgba(26,36,41,.78); --tip-text:#F2F2F0; --tip-2:rgba(242,242,240,.6); --tip-up:#3DDC84; --tip-dn:#FF6A5C; color-scheme:dark; }