/* =========================================================================== CAPA DE TEMA — la piel del sitio, en variables. POR QUE EXISTE. El sitio nacio con el CSS de Expansion porque el destinatario era Expansion. Al querer ofrecer la agenda macro a OTROS clientes, ese diseno pasa de ventaja a atadura: ni encaja con otras marcas ni se ve actual. La solucion no es cambiar una piel por otra, sino que la piel sea intercambiable — asi el mismo codigo se le ensena a cada cliente en SUS colores, y Expansion pasa a ser un tema mas en vez de la unica opcion. COMO SE USA. elige el tema; lo fija DM_TEMA en el .env (ver app/config.py). Temas: robexia (por defecto) — el de liquidity.robexia.com expansion — el salmon heredado, para cuando el destinatario es Expansion REGLA: las plantillas NO llevan colores propios, solo variables. Si algo necesita un color nuevo, se anade aqui como token en LOS DOS temas. =========================================================================== */ :root, [data-tema="robexia"] { /* Paleta tomada de liquidity.robexia.com, que ya trabajaba con variables */ --dm-primary: #0A2540; /* azul marino: texto y titulares */ --dm-secondary: #5A6B82; /* texto secundario, etiquetas */ --dm-accent: #2D7FF9; /* azul de accion: enlaces, activo */ --dm-accent-fuerte: #1A5FD0; /* hover del anterior */ --dm-destacado: #00C2C7; /* turquesa: acentos puntuales */ --dm-fondo: #F4F7FB; /* fondo de pagina */ --dm-superficie: #FFFFFF; /* tarjetas y tablas */ --dm-borde: #D8E0EC; --dm-borde-suave: #E8EDF4; --dm-positivo: #1DB87A; --dm-negativo: #E5484D; /* Tokens de la agenda. Se definen APARTE de la paleta porque su significado es semantico, no cromatico: "hueco estructural", "dato superado"... Asi un tema nuevo solo tiene que decidir el color, no reinventar la regla. */ --dm-celda-na: #EDF1F7; /* columna que ese indicador NO publica */ --dm-rev: #8496AE; /* "Rev. desde": dato ya superado */ --dm-rev-linea: rgba(132,150,174,.45); --dm-avance: #2D7FF9; /* etiqueta "Avance" en la columna Tipo */ --dm-atenuado: #96A3B5; /* subvalores discretos */ --dm-cabecera-tabla: #EFF3F9; --dm-fuente: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --dm-fuente-cifras: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --dm-radio: 8px; --dm-sombra: 0 1px 2px rgba(10,37,64,.06), 0 2px 8px rgba(10,37,64,.04); } /* El tema heredado. NO se borra: es el que hay que servir cuando el cliente sea Expansion, y ademas deja constancia de los valores originales. */ [data-tema="expansion"] { --dm-primary: #3b3b3b; --dm-secondary: #6b6b6b; --dm-accent: #0071b3; --dm-accent-fuerte: #018fe2; --dm-destacado: #b8860b; --dm-fondo: #fff1e0; /* el salmon */ --dm-superficie: #fffdfa; --dm-borde: #e3d8c8; --dm-borde-suave: #efe6da; --dm-positivo: #77b259; --dm-negativo: #c0392b; --dm-celda-na: #faeee1; --dm-rev: #c49b4a; --dm-rev-linea: rgba(196,155,74,.40); --dm-avance: #b8860b; --dm-atenuado: #b9c0c9; --dm-cabecera-tabla: #f5f7fa; --dm-fuente: Georgia, 'Times New Roman', serif; --dm-fuente-cifras: inherit; --dm-radio: 0; --dm-sombra: none; } /* -------------------------------------------------------------------------- Base del tema robexia. Solo se aplica cuando NO es el tema heredado: con expansion mandan sus hojas de estilo originales, que se cargan aparte. -------------------------------------------------------------------------- */ html:not([data-tema="expansion"]) body { font-family: var(--dm-fuente); background: var(--dm-fondo); color: var(--dm-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; } html:not([data-tema="expansion"]) h1, html:not([data-tema="expansion"]) h2, html:not([data-tema="expansion"]) h3 { color: var(--dm-primary); font-weight: 600; letter-spacing: -.01em; } html:not([data-tema="expansion"]) a { color: var(--dm-accent); text-decoration: none; } html:not([data-tema="expansion"]) a:hover { color: var(--dm-accent-fuerte); text-decoration: underline; } /* Tarjetas y bloques: superficie blanca sobre el fondo azulado */ html:not([data-tema="expansion"]) .card, html:not([data-tema="expansion"]) .dm-panel { background: var(--dm-superficie); border: 1px solid var(--dm-borde-suave); border-radius: var(--dm-radio); box-shadow: var(--dm-sombra); } /* Cabecera y pie */ html:not([data-tema="expansion"]) #header, html:not([data-tema="expansion"]) .site-footer { background: var(--dm-superficie); border-bottom: 1px solid var(--dm-borde); } html:not([data-tema="expansion"]) .site-footer { border-bottom: 0; border-top: 1px solid var(--dm-borde); } html:not([data-tema="expansion"]) .navbar-brand { color: var(--dm-primary); font-weight: 700; letter-spacing: -.02em; } html:not([data-tema="expansion"]) .nav-link { color: var(--dm-secondary); font-weight: 500; } html:not([data-tema="expansion"]) .nav-link:hover { color: var(--dm-accent); } /* Tablas de datos: las cifras en monoespaciada para que alineen por columna */ html:not([data-tema="expansion"]) table { background: var(--dm-superficie); } html:not([data-tema="expansion"]) .tabledat td, html:not([data-tema="expansion"]) .dm-agenda-tbl td { font-family: var(--dm-fuente-cifras); }