/* ═══════════════════════════════════════════════════════════════════════════ RVT System · TEMA DE COLORES ─────────────────────────────────────────────────────────────────────────── Único sitio donde se definen los colores del sistema. Las plantillas y los CSS de cada pantalla usan var(--nombre) en vez de literales. Reglas: · Este archivo se carga en TODAS las plantillas ANTES de style.css. · Los valores son exactamente los que ya usaba la app (inventario TEMA-0, docs/tema/00_resumen.md). Migrar una pantalla = sustituir cada literal por la variable que vale lo mismo. Cambio visual cero, verificado con docs/tema/capturas.py. · Los casi-duplicados (colores que difieren en menos de 12 niveles) se conservan en la sección "VARIANTES POR UNIFICAR", con el valor en el nombre. Unificarlos es un paso aparte: se cambia aquí la variante para que apunte a la canónica (p. ej. --borde-ddd: var(--borde)) y se revisa la captura. · Los colores de correos, Excel y JS (app.py, static/*.js) no pasan por aquí todavía; están anotados en el inventario. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── MARCA (verdes) ─────────────────────────────────────────────────────── */ /* Tres verdes con valor propio; el resto se deriva del base por mezcla. */ --verde: #1f7a60; /* base: botones, bandas, bordes, cabeceras del mini control */ --verde-vivo: #32a487; /* verde brillante: botones secundarios, hover, éxito, barra del Panel */ --verde-menta: #6ed6b0; /* acento de la barra superior (nombre de usuario, iconos) */ --verde-oscuro: color-mix(in srgb, var(--verde) 80%, #000); /* sección oscura (barra, títulos), texto sobre tintes, hover del sólido */ --verde-fondo: color-mix(in srgb, var(--verde) 12%, var(--blanco)); /* fondo de página verde, cabeceras de tabla, filas hover */ --verde-suave: color-mix(in srgb, var(--verde) 22%, var(--blanco)); /* tarjetas, pastilla Sí, semáforo 2+ años, desplegables */ --verde-completo: color-mix(in srgb, var(--verde) 45%, var(--blanco)); /* estado 'completo': formulario AEAT con todo relleno, caja Deducción Fiscal con contrato */ --verde-noche-2: color-mix(in srgb, var(--verde) 40%, #000); /* inicio del degradado de la home */ --verde-noche: color-mix(in srgb, var(--verde) 20%, #000); /* fondo de la home y del portal de colocadores */ /* ── SECCIONES ──────────────────────────────────────────────────────────── */ /* Cada sección tiene: color de menú/botón, fondo de página, hover y tinte claro. */ /* AZUL (Consulta, Proyectos, Leads): dos hex y cuatro derivados. base para el tinte del menú, iconos de acción (carpeta, enviar firmado) y la barra de Leads; oscuro para la barra de Consulta/Proyectos, títulos, texto del menú, botones sólidos y bandas de tabla (marino, no sale del base); el menú (tinte, borde, texto y activo) también va en oscuro; hover para hover y activo de los botones marino; claro para el panel de Consulta, la celda 2 AÑOS y bordes; suave para celdas marcadas (grupo 4 de Cuentas, prio SENT); fondo para página, cabeceras y badges. */ --azul: #0a59ad; --azul-oscuro: #0a59ad; --azul-hover: color-mix(in srgb, var(--azul-oscuro) 30%, var(--azul)); /* hover y activo de los botones marino */ --azul-claro: color-mix(in srgb, var(--azul) 65%, var(--blanco)); --azul-suave: color-mix(in srgb, var(--azul) 30%, var(--blanco)); --azul-fondo: color-mix(in srgb, var(--azul) 12%, var(--blanco)); --azul-tenue: color-mix(in srgb, var(--azul-oscuro) 14%, var(--blanco)); /* celeste grisáceo (#d7dfeb): fila completa del mini control de Consulta y fondos de bloque de Consulta */ /* VIOLETA (Control, Tareas, Cuentas, Facturación): un hex y tres derivados. base para botones, bandas, botón FPP y menú; oscuro para la barra superior (--bg) y texto del menú; claro para cabeceras de tabla, celda 3 AÑOS y hover; suave para celdas, badges y resúmenes. */ --purpura: #6a47b0; --purpura-oscuro: color-mix(in srgb, var(--purpura) 65%, #000); --purpura-claro: color-mix(in srgb, var(--purpura) 45%, var(--blanco)); --purpura-suave: color-mix(in srgb, var(--purpura) 15%, var(--blanco)); /* AQUA (Mailing): dos hex y un derivado. base para el tinte del menú y acentos; solido para el botón activo del menú, botones de herramienta, barra superior (--bg) y texto; fondo para superficies claras. */ --aqua: #4abbd2; --aqua-solido: #2596ad; --aqua-fondo: color-mix(in srgb, var(--aqua) 12%, var(--blanco)); /* Texto en el color de cada sección sobre fondos claros (botones tintados del menú) */ /* Color OSCURO de cada sección: lo usa la barra superior (menu.html deriva su degradado de --bg). Hoy coincide con el fondo de página; cuando el fondo pase a claro, la barra conserva este. */ /* ── PAPEL: lo que va directamente sobre el fondo de la página ─────────── */ /* Títulos, etiquetas y líneas apoyados en el fondo de sección (no en tarjetas ni en botones). Con fondo de página claro: texto oscuro, título en el color de la sección, línea gris. */ --pagina-linea: color-mix(in srgb, var(--texto) 22%, transparent); /* ── BARRA SUPERIOR ─────────────────────────────────────────────────────── */ --barra-claridad: 0%; /* aclarado extra de la barra con blanco (0% = la fórmula del mockup: sección oscura mezclada con negro) */ /* ── NEUTRALES ──────────────────────────────────────────────────────────── */ --blanco: #f8f8fa; /* blanco del sistema (ghost white) (sin blanco puro): tarjetas, tablas, campos y texto sobre color. Absorbe --fondo y --barra-texto */ /* ── ESCALA DE LA INTERFAZ (28/09/2026) · el diseño se ve al 75 % en todos los navegadores sin depender del zoom de Safari (Marce lo tenía al 75 % por sitio). Lo aplica el bloque «ESCALA DE LA INTERFAZ» al final de style.css (y estadisticas.html, que no carga style.css). Fuera: pantallas embebidas en modal (ya van dentro de un padre escalado) y el portal de colocadores. Con este token la pantalla de 1728 px se comporta como una de 2304. ── */ --escala-ui: .75; /* ── ESCALA TIPOGRÁFICA (27/09/2026) · una talla por rol para TODO el sistema. Para cambiar un tamaño, tocar SOLO aquí: el criterio «ESCALA TIPOGRÁFICA» al final de style.css los aplica sin números propios. Fuera de la escala: modales rvtm y formularios embebidos (tienen la suya). Mínimo legible: 12px. ── */ --tipo-titulo: 28px; --peso-titulo: 800; /* título de página (.titulo-pagina); antes 32 */ --tipo-seccion: 20px; --peso-seccion: 800; /* h2 dentro de la página («Inversores para…») */ --tipo-sub: 17px; --peso-sub: 700; /* h3 */ --tipo-control: 15px; --peso-control: 600; /* botones de botonera, pestañas, inputs, selects, segmentados */ --tipo-menu: 16px; --peso-menu: 600; /* pestañas del menú principal (menu.html); hasta 1600px van medio punto menos */ --peso-boton: 700; /* peso por defecto de cualquier