/** * Tokens de Diseño - LAND PROPERTY MAP * ====================================== * Capa semántica que conecta: * 1. tema-variables.css (3 temas: default, nocturno, futurista) * 2. Branding SaaS (colores de cada organización) * * Los componentes consumen ESTOS tokens, no las variables --tema-* directamente. * Así cuando un tenant SaaS define su branding, basta con sobreescribir los tokens. * * Orden de carga: * Bootstrap → tema-variables.css → design-tokens.css → navbar.css → componentes */ /* ================================================ TOKENS BASE — Mapean a tema-variables.css ================================================ */ :root { /* --- Superficies --- */ --superficie-cuerpo: var(--tema-fondo-cuerpo); --superficie-tarjeta: var(--tema-fondo-tarjeta); --superficie-panel: var(--tema-fondo-panel); --superficie-hover: var(--tema-fondo-hover); --superficie-activa: var(--tema-fondo-activo); /* --- Textos --- */ --texto-primario: var(--tema-texto-primario); --texto-secundario: var(--tema-texto-secundario); --texto-silenciado: var(--tema-texto-silenciado); --texto-claro: var(--tema-texto-claro); --texto-invertido: var(--tema-texto-invertido); /* --- Marca --- */ --marca-primario: var(--tema-primario); --marca-secundario: var(--tema-secundario); --marca-acento: var(--tema-acento); /* --- Gradientes --- */ --gradiente-primario: var(--tema-gradiente-primario); /* --- Bordes --- */ --borde-color: var(--tema-borde-color); --borde-hover: var(--tema-borde-hover); --borde-activo: var(--tema-borde-activo); --borde-radio: var(--tema-borde-radio-mediano); /* --- Sombras --- */ --sombra-suave: var(--tema-sombra-suave); --sombra-media: var(--tema-sombra-media); --sombra-tarjeta: var(--tema-sombra-tarjeta); /* --- Estados --- */ --estado-exito: var(--tema-exito); --estado-advertencia: var(--tema-advertencia); --estado-peligro: var(--tema-peligro); --estado-info: var(--tema-info); /* --- Navbar --- */ --navbar-fondo: var(--tema-navbar-fondo); --navbar-texto: var(--tema-navbar-texto); --navbar-hover: var(--tema-navbar-hover); /* --- Transiciones --- */ --transicion-rapida: var(--tema-transicion-rapida); --transicion-suave: var(--tema-transicion-suave); } /* ================================================ BRANDING SaaS — Se activa con [data-branding] Cuando una organización tiene colores personalizados, el backend inyecta data-branding="custom" en y las variables --org-* con los colores del tenant. ================================================ */ [data-branding="custom"] { /* Los colores de la org sobreescriben los tokens de marca */ --marca-primario: var(--org-primario, var(--tema-primario)); --marca-secundario: var(--org-secundario, var(--tema-secundario)); --marca-acento: var(--org-acento, var(--tema-acento)); /* Navbar usa los colores de la organización */ --navbar-fondo: var(--org-navbar, var(--tema-navbar-fondo)); /* Gradiente se adapta al branding */ --gradiente-primario: linear-gradient(135deg, var(--org-primario, var(--tema-primario)) 0%, var(--org-secundario, var(--tema-secundario)) 100%); }