/* ══════════════════════════════════════════════════════════════════════ ECPF Tools — Paleta de los dos temas Archivo: ecpf-tools/assets/css/tema.css Única fuente de color del módulo. Se carga ANTES que cualquier otra hoja, y todas las demás consumen estas variables sin redefinirlas. El tema CLARO es la base y vive en :root, así que es lo que se ve cuando el usuario todavía no ha elegido nada. El OSCURO solo sobrescribe las variables que cambian; no repite la hoja entera. Los valores del claro no son inventados: salen de assets/css/estimado-verjas.css, que ya llevaba la identidad clara corporativa (crema, verde y dorado del logo). Esa hoja NO se toca: aquí solo se reutilizan sus colores. La clase de tema se aplica a y a . A la pone un script diminuto en el , antes de pintar nada, para que no haya destello del tema equivocado; a la replica tema.js para las reglas heredadas que apuntan a `body.dark-mode`. ══════════════════════════════════════════════════════════════════════ */ :root { /* ── Superficies ── Crema suave, no gris azulado: es el fondo de la hoja del estimado. */ --ecpt-bg: #f1f3ec; --ecpt-bg-soft: #f7f8f4; --ecpt-surface: #ffffff; --ecpt-border: #d7ddd4; --ecpt-border-soft: #e8ece5; /* ── Tinta ── Principal con base verde muy oscura; secundaria gris verdosa. */ --ecpt-text: #1f2a24; --ecpt-text-soft: #4f5f55; --ecpt-text-dim: #6e7d72; /* ── Dorado corporativo ── Sobre fondo claro el dorado del logo (#e3a81a) no da contraste suficiente para texto: sobre la crema del módulo da 2.0:1. Ni siquiera el #b8850f del estimado llega (2.9:1), porque allí se usa sobre papel blanco y aquí sobre crema. Por eso el TEXTO usa una versión más honda —4.6:1— y la SUPERFICIE conserva el dorado brillante del logo, que es donde sí debe verse tal cual. */ --ecpt-gold: #8f660a; --ecpt-gold-bright: #e3a81a; --ecpt-gold-dark: #6f4f07; /* ── Verde corporativo: acciones y estados positivos ── */ --ecpt-green: #255325; --ecpt-green-dark: #1a461b; --ecpt-ok: #255325; --ecpt-ok-bg: rgba(37, 83, 37, 0.10); --ecpt-danger: #b3261e; --ecpt-danger-bg: rgba(179, 38, 30, 0.08); --ecpt-warn: #8a6100; --ecpt-warn-bg: rgba(227, 168, 26, 0.16); /* ── Botón principal ── En claro va en verde corporativo: es una acción, y sobre el dorado del logo el texto blanco solo daría 3.3:1. Con este verde llega a 9.0:1. En oscuro se conserva el dorado ya aprobado. */ --ecpt-btn-from: #255325; --ecpt-btn-to: #1a461b; --ecpt-on-btn: #ffffff; --ecpt-radius: 14px; --ecpt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Sombras moderadas: elevación, no dramatismo. */ --ecpt-shadow: 0 1px 2px rgba(31, 42, 36, 0.05), 0 6px 18px rgba(31, 42, 36, 0.07); --ecpt-shadow-soft: 0 1px 2px rgba(31, 42, 36, 0.04); /* Tinte del icono del interruptor. Resuelto numéricamente contra #255325; con estos valores ya redondeados devuelve #275427. */ --ecpt-icon-filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(72%) hue-rotate(71deg) brightness(224%) contrast(241%); /* ══ Familia de variables de la CALCULADORA ══ calculadora-verjas.css es una copia literal de las reglas del Portal y consume otros nombres. Se resuelven aquí para que el módulo entero cambie de tema desde un solo sitio. */ --bg-main: #f1f3ec; --bg-soft: #e7ebe1; --shadow-dark: #d2d7cb; --shadow-light: #ffffff; --text-secondary: #4f5f55; --text-soft: #6e7d72; --text-dark: #1f2a24; --calc-ink: #1a461b; --accent: #8f660a; --accent-strong: #e3a81a; --success: #255325; --success-solid: #255325; --danger: #b3261e; /* Tinta sobre el dorado de la caja del total y la cabecera de tabla */ --on-accent: #1f2a24; --on-accent-soft: rgba(31, 42, 36, 0.76); --on-accent-dim: rgba(31, 42, 36, 0.62); --on-accent-line: rgba(31, 42, 36, 0.22); --border-light: rgba(26, 70, 27, 0.10); --border-radius-sm: 10px; --border-radius-md: 14px; --border-radius-lg: 18px; --halo-light: 0 0 0 1px rgba(26, 70, 27, 0.05); --halo-accent: 0 0 0 2px rgba(143, 102, 10, 0.38); --transition-base: 0.16s ease; --transition-fast: 0.2s ease; /* Fondo de página de la calculadora, que es más hondo que el panel */ --ecpt-page-bg: #eaeee3; } /* ══════════════════════════════════════════════════════════════════════ TEMA OSCURO El ya aprobado, intacto en sus valores. Solo se traslada aquí para que viva junto a su contrario en vez de repartido por cuatro hojas. Se declara en :root.dark-mode y en body.dark-mode: la primera la pone el script anti-destello del , la segunda tema.js. Cualquiera de las dos basta. ══════════════════════════════════════════════════════════════════════ */ :root.dark-mode, body.dark-mode { --ecpt-bg: #0e1116; --ecpt-bg-soft: #151a22; --ecpt-surface: #1a212b; --ecpt-border: #2a3441; --ecpt-border-soft: #222b36; --ecpt-text: #e8edf4; --ecpt-text-soft: #9aa8ba; --ecpt-text-dim: #6b7889; --ecpt-gold: #e6b84c; --ecpt-gold-bright: #f0cd7a; --ecpt-gold-dark: #c99a2e; --ecpt-green: #6ee7a8; --ecpt-green-dark: #25834c; --ecpt-ok: #6ee7a8; --ecpt-ok-bg: rgba(110, 231, 168, 0.12); --ecpt-danger: #ff8a80; --ecpt-danger-bg: rgba(255, 82, 82, 0.10); --ecpt-warn: #ffd08a; --ecpt-warn-bg: rgba(230, 184, 76, 0.10); --ecpt-btn-from: #e6b84c; --ecpt-btn-to: #c99a2e; --ecpt-on-btn: #12161c; --ecpt-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.38); --ecpt-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28); /* Resuelto contra #e8edf4; con los valores redondeados da #e7f0f9. */ --ecpt-icon-filter: brightness(0) saturate(100%) invert(38%) sepia(1%) saturate(1363%) hue-rotate(172deg) brightness(205%) contrast(155%); /* ── Calculadora, variante oscura ── */ --bg-main: #171d26; --bg-soft: #1f2733; --shadow-dark: #12171f; --shadow-light: #232c39; --text-secondary: #e8edf4; --text-soft: #9aa8ba; --text-dark: #f5ebd3; --calc-ink: #f5ebd3; --accent: #e6b84c; --accent-strong: #f0cd7a; --success: #6ee7a8; --success-solid: #25834c; --danger: #ff8a80; --on-accent: #171d26; --on-accent-soft: rgba(23, 29, 38, 0.74); --on-accent-dim: rgba(23, 29, 38, 0.62); --on-accent-line: rgba(23, 29, 38, 0.26); --border-light: rgba(255, 255, 255, 0.07); --halo-light: 0 0 0 1px rgba(255, 255, 255, 0.03); --halo-accent: 0 0 0 2px rgba(230, 184, 76, 0.35); --ecpt-page-bg: #0e1116; } /* ══════════════════════════════════════════════════════════════════════ INTERRUPTOR DE TEMA Mismo patrón que la barra superior del Portal: un