/* Radar D&A — TEMAS (R-F2, 10/09). Se carga DESPUES de radar.css. Aqui vive UNA sola clase de regla: bloques `body[data-tema=…]` / `[data-sidebar=…]` que redefinen tokens. Ni un selector de componente. Si un tema necesita cambiar algo que no tiene token, el arreglo es crear el token en el `:root` de radar.css, no escribir el selector aqui. */ /* ═══════════════════════════════════════════════════════════════════════════════ TEMAS (T3, 15/08 · T7, 16/08 · R-F1/R-F2, 10/09). Tres temas × dos barras laterales, elegidos por cada usuario (T4) mediante . Cada bloque redefine SOLO tokens. Desde R-F1 no queda ni un selector de componente: los 60 que había (21 en Softys, 39 en Clásico) se convirtieron en tokens de forma, declarados en el `:root` de radar.css. Si un tema necesita algo que no tiene token, el arreglo es crear el token allí, nunca escribir el selector aquí. Sin atributos, :root = Cockpit + barra oscura (el aspecto histórico). ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Cockpit · sidebar CLARA (nueva, 15/08: no existía) ── */ body[data-tema="cockpit"][data-sidebar="clara"] { --sb-fondo: #faf9f5; --sb-tinta: #4d4c46; --sb-tinta-fuerte: #14161a; --sb-linea: #e3e1d8; --sb-hover: #efeee9; --sb-activo-fondo: #e8efe9; --sb-activo-tinta: #14161a; --sb-marcador: #1e8a4c; --sb-badge-fondo: #efeee9; --sb-badge-tinta: #6b6a63; --sb-badge-activo-fondo: #1e8a4c; --sb-badge-activo-tinta: #ffffff; --sb-input-fondo: #ffffff; --sb-input-borde: #dad8d0; --sb-placeholder: #8a939c; --sb-etiqueta: #8a939c; --sb-marca-sub: #8a939c; /* (R-F1e) La barra clara se separa del contenido con un filete y escribe en tinta. */ --sb-borde-der: 1px solid var(--sb-linea); --sb-input-tinta: var(--tinta); } /* ── Softys (referencia «Gasto Personal Care Santander») ── */ body[data-tema="softys"] { --sans: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --h1-tam: 26px; --h1-peso: 300; --h1-esp: -.6px; --papel: #edf3f6; /* un punto más gris-azul que la referencia: las tarjetas blancas destacan */ --superficie: #ffffff; --superficie-2: #f3f7f9; --tinta: #0e2e42; --tinta-2: #3b5364; /* un punto más oscuro que la referencia: la app se leía lavada */ --tinta-3: #6d8797; --linea: #cfdde5; --linea-suave: #dfe9ee; --pista: #dfe9ee; --seleccion: #eaf3f6; --resalte: #fbf3e2; --velo: rgba(14, 46, 66, .42); --sombra: 0 20px 60px rgba(14, 46, 66, .28); --acento: #0080a0; --acento-2: #10527e; --acento-suave: #e0eff3; --ok: #0e8a7d; --ok-fuerte: #0b6f65; --ok-suave: #e3f1ee; --alerta: #c77e0a; --alerta-fuerte: #9a6108; --alerta-suave: #fbefdd; --peligro: #c0392b; --peligro-fuerte: #a32f23; --peligro-suave: #f8e4e1; --info: #0080a0; --info-fuerte: #10527e; --info-suave: #e0eff3; --pausa: #5b4b8a; --pausa-fuerte: #4a3c72; --pausa-suave: #ece7f4; --neutro: #8aa3b2; --neutro-fuerte: #3b5364; --neutro-suave: #e8eef2; --cat-1: #0080a0; --cat-2: #0e8a7d; --cat-3: #10527e; --cat-4: #5b4b8a; --cat-5: #2f6f7a; --cat-6: #c0392b; --cat-7: #8a6e3b; --cat-8: #6b7a3f; --cat-9: #9c5a3c; --cat-10: #4a5a6b; --cat-11: #c08a2e; --cat-12: #7a5c7a; /* sidebar clara (la del mock aprobado) */ --sb-fondo: #ffffff; --sb-tinta: #3b5364; --sb-tinta-fuerte: #0e2e42; --sb-linea: #cfdde5; --sb-hover: #e6eff3; --sb-activo-fondo: #0080a0; /* activo en teal (el mismo de la sidebar oscura), Hedi 16/08: la tinta se pasó */ --sb-activo-tinta: #ffffff; --sb-marcador: #ffffff; --sb-badge-fondo: #e6eef2; --sb-badge-tinta: #3b5364; --sb-badge-activo-fondo: #3fb0cb; --sb-badge-activo-tinta: #0e2e42; --sb-input-fondo: #f5f9fa; --sb-input-borde: #dae6ec; --sb-placeholder: #7d97a6; --sb-etiqueta: #7d97a6; --sb-marca-sub: #7d97a6; /* (R-F1a) Forma: el botón primario es tinta, no acento, y los campos van sobre papel salvo la búsqueda de la cabecera, que se queda blanca para despegarse del título. */ --boton-primario-fondo: var(--tinta); --boton-primario-borde: var(--tinta); --boton-primario-hover: var(--acento-2); --boton-primario-hover-borde: var(--acento-2); --campo-fondo: var(--papel); --campo-fondo-foco: var(--superficie); /* (R-F1b) Cabecera sin banda: titulo editorial sobre el papel, con rotulo teal. */ --cab-fondo: transparent; --cab-borde-inf: 0 solid transparent; --cab-pad: 1rem 1.75rem .4rem; --cab-margen: -1.5rem -1.75rem 1rem; --cab-rotulo: "Portafolio D&A \B7 Softys ColEC"; /* (R-F1c) El encabezado de tabla solo aporta el filete de tinta; el texto es el estandar comun de los tres temas (R1.3). */ --th-borde-inf: 1px solid var(--tinta); --th-fondo: var(--superficie); /* (R-F1d) KPIs en franja: filete de tinta arriba, separadores verticales, sin cajas. */ --kpis-gap: 0; --kpis-borde-sup: 1px solid var(--tinta); --kpis-borde-inf: 1px solid var(--linea); --kpi-fondo: transparent; --kpi-borde: 0 solid transparent; --kpi-radio: 0; --kpi-pad: 14px 18px 14px 0; --kpi-pad-izq-sig: 18px; --kpi-separador: 1px solid var(--linea); --kpi-nombre-tam: 9px; --kpi-nombre-esp: 2.2px; --kpi-valor-tinta: var(--acento-2); --kpi-valor-esp: -.8px; /* (R-F1e) Barra clara con filete; el item es una pastilla con el marcador por dentro. */ --sb-borde-der: 1px solid var(--sb-linea); --sb-input-tinta: var(--tinta); --nav-item-radio: 6px; --nav-item-margen: 0 .5rem; --nav-item-pad-izq: .6rem; --nav-marcador-ancho: 0; --nav-activo-sombra: inset 3px 0 0 var(--sb-marcador); /* El control activo va en tinta, como el boton primario. */ --seg-activo-fondo: var(--tinta); } body[data-tema="softys"][data-sidebar="oscura"] { --sb-fondo: #0e2e42; --sb-tinta: #a9c0ce; --sb-tinta-fuerte: #ffffff; --sb-linea: #1e4359; --sb-hover: #164059; --sb-activo-fondo: #0080a0; /* teal sólido sobre navy: el ítem activo salta a la vista */ --sb-activo-tinta: #ffffff; --sb-marcador: #ffffff; --sb-badge-fondo: #1e4359; --sb-badge-tinta: #c7d8e1; --sb-badge-activo-fondo: #3fb0cb; --sb-badge-activo-tinta: #0e2e42; --sb-input-fondo: #164059; --sb-input-borde: #1e4359; --sb-placeholder: #6e8ca0; --sb-etiqueta: #6e8ca0; --sb-marca-sub: #7fa0b4; --sb-borde-der: 0 solid transparent; --sb-input-tinta: var(--sb-tinta-fuerte); } /* ── Clásico (T7, 16/08 · mock docs/mock-tema-clasico.html): portal blanco + azul institucional + grises. Segoe UI compacta y cifras normales (--mono = --sans). Decisiones de Hedi: sidebar en lista, barra de título #10527e, semáforo con sus colores, escala de estados Pendiente vacío → En Proceso azul pálido → Finalizada verde suave → Aprobada azul sólido; Anulada gris tachado; Pausada gris con ‖. ── */ body[data-tema="clasico"] { --sans: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --mono: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --h1-tam: 18px; --h1-peso: 600; --h1-esp: -.1px; --radio: 3px; --papel: #ffffff; --superficie: #ffffff; --superficie-2: #f7f8fa; --tinta: #1f2933; --tinta-2: #4b5563; --tinta-3: #6b7480; --linea: #d9dce1; --linea-suave: #e8eaee; --pista: #eef0f3; --seleccion: #f1f6fb; --resalte: #fdf6e3; --velo: rgba(31, 41, 51, .45); --sombra: 0 12px 40px rgba(31, 41, 51, .22); --acento: #10527e; --acento-2: #0e2e42; --acento-suave: #e4eef7; --acento-claro: #a9cbe3; --ok: #1e7f4f; --ok-fuerte: #176440; --ok-suave: #e3f2ea; --alerta: #b26a00; --alerta-fuerte: #8f5500; --alerta-suave: #fdf1dc; --peligro: #b3261e; --peligro-fuerte: #8f1e18; --peligro-suave: #fbe9e7; --info: #2e6fa3; --info-fuerte: #10527e; --info-suave: #e4eef7; --pausa: #6b7480; --pausa-fuerte: #4b5563; --pausa-suave: #eef0f3; --neutro: #9aa3ad; --neutro-fuerte: #4b5563; --neutro-suave: #eef0f3; --graf-real: #10527e; --graf-linea: #2e6fa3; /* (R-F1a) Forma de portal: esquinas discretas en controles y chips rectos. */ --radio-control: 3px; --radio-chip: 2px; /* (R-F1b) Barra de titulo azul solida: una sola linea, titulo blanco y subtitulo al lado en azul claro; la busqueda y la fecha hablan el mismo idioma. */ --cab-fondo: var(--acento); --cab-tinta: var(--sobre-solido); --cab-borde-inf: 0 solid transparent; --cab-pad: .7rem 1.75rem; --cab-alineacion: center; --cab-datos-display: flex; --cab-sub-tinta: var(--acento-claro); --cab-sub-margen: 0; --cab-badge-fondo: var(--acento-2); --cab-badge-tinta: var(--sobre-solido); --cab-badge-borde: 1px solid var(--acento-2); --cab-busqueda-fondo: var(--acento-2); --cab-busqueda-borde: var(--acento-2); --cab-busqueda-tinta: var(--sobre-solido); --cab-busqueda-hueco: var(--acento-claro); --cab-fecha-tinta: var(--acento-claro); /* (R-F1c) Tablas de portal: encabezado gris con filete, filas alternas y hover azul. */ --th-fondo: var(--neutro-suave); --th-borde-sup: 1px solid var(--linea); --td-borde-inf: 1px solid var(--linea-suave); --fila-par-fondo: var(--superficie-2); --fila-hover-fondo: var(--seleccion); /* (R-F1d) La cifra del KPI en azul; el semantico sigue mandando cuando lo trae. */ --kpi-valor-tinta: var(--acento); /* (R-F1e) Marca sobre franja blanca en las dos barras, como el portal; rotulos de grupo mas legibles y badges de conteo con borde y cifra en la fuente del texto. */ --sb-borde-der: 1px solid var(--sb-linea); --sb-input-tinta: var(--tinta); --marca-fondo: var(--superficie); --marca-tinta: var(--tinta); --marca-borde-inf: 1px solid var(--sb-linea); --marca-margen-inf: .55rem; --marca-pad: .7rem 1rem; --marca-sub-tinta: var(--tinta-3); --nav-grupo-tam: 9.5px; --nav-grupo-esp: .8px; --nav-activo-ico: var(--sb-marcador); --badge-borde: 1px solid var(--sb-linea); --badge-fuente: var(--sans); --badge-peso: 600; --badge-activo-borde: var(--sb-badge-activo-fondo); --badge-ambar-fondo: var(--acento); --badge-ambar-borde: var(--acento); --badge-ambar-tinta: var(--sobre-solido); /* (R-F1f) La escala de estado se invierte respecto al Cockpit: En Proceso azul palido, Finalizada verde suave, Aprobada azul solido, Pausada con doble filete. */ --estado-proceso-fondo: var(--info-suave); --estado-proceso-tinta: var(--info-fuerte); --estado-proceso-solido: var(--info); --estado-final-fondo: var(--ok-suave); --estado-final-tinta: var(--ok-fuerte); --estado-final-solido: var(--ok); --estado-aprobada-fondo: var(--acento); --estado-aprobada-tinta: var(--sobre-solido); --estado-aprobada-solido: var(--acento); --estado-pendiente-fondo: var(--superficie); --estado-pendiente-tinta: var(--tinta-2); --estado-pendiente-borde: var(--linea); --estado-anulada-tinta: var(--tinta-3); --estado-pausa-fondo: var(--neutro-suave); --estado-pausa-tinta: var(--tinta-2); --estado-pausa-borde: var(--linea); --estado-chip-borde: 1px solid transparent; --estado-pausa-glifo: inline-block; --cifras: tabular-nums; /* Sin color por programa: la categórica es una rampa azul/gris. */ --cat-1: #10527e; --cat-2: #2e6fa3; --cat-3: #5b8fbf; --cat-4: #8fb4d6; --cat-5: #0e2e42; --cat-6: #4b5563; --cat-7: #6b7480; --cat-8: #8f98a3; --cat-9: #b8bec7; --cat-10: #1e7f4f; --cat-11: #7fb39a; --cat-12: #b8d0e6; /* sidebar clara = gris del portal */ --sb-fondo: #f3f4f6; --sb-tinta: #4b5563; --sb-tinta-fuerte: #1f2933; --sb-linea: #dfe2e7; --sb-hover: #e8eaee; --sb-activo-fondo: #e4eef7; --sb-activo-tinta: #0e2e42; --sb-marcador: #10527e; --sb-badge-fondo: #ffffff; --sb-badge-tinta: #4b5563; --sb-badge-activo-fondo: #10527e; --sb-badge-activo-tinta: #ffffff; --sb-input-fondo: #ffffff; --sb-input-borde: #d9dce1; --sb-placeholder: #6b7480; --sb-etiqueta: #6b7480; --sb-marca-sub: #6b7480; } body[data-tema="clasico"][data-sidebar="oscura"] { --sb-fondo: #0e2e42; --sb-tinta: #a9c0ce; --sb-tinta-fuerte: #ffffff; --sb-linea: #1e4359; --sb-hover: #164059; --sb-activo-fondo: #2e6fa3; --sb-activo-tinta: #ffffff; --sb-marcador: #ffffff; --sb-badge-fondo: #1e4359; --sb-badge-tinta: #c7d8e1; --sb-badge-activo-fondo: #ffffff; --sb-badge-activo-tinta: #0e2e42; --sb-input-fondo: #164059; --sb-input-borde: #1e4359; --sb-placeholder: #6e8ca0; --sb-etiqueta: #6e8ca0; --sb-marca-sub: #7fa0b4; --sb-borde-der: 0 solid transparent; --sb-input-tinta: var(--sb-tinta-fuerte); --nav-activo-ico: var(--sb-activo-tinta); }