/* ============================================================ DSA Compliance · Kit gráfico — variables y utilidades assets/kit/tokens/dsa-kit.css Cargar UNA vez, antes de los estilos de página. No contiene reset ni tipografía de página: solo el kit. ============================================================ */ :root { /* --- Marca --- */ --dsa-tinta: #171B45; /* navy corporativo, texto y estructura */ --dsa-tinta-profunda: #12153A; /* fondos oscuros secundarios */ --dsa-cian: #4BCDE7; --dsa-cian-medio: #2497C4; --dsa-azul: #0E5F86; --dsa-acero: #5977B5; --dsa-violeta: #6D2B8D; --dsa-magenta: #80148C; --dsa-purpura: #7F0977; /* --- Neutros --- */ --dsa-texto: #2C2C2A; --dsa-texto-suave: #5F5E5A; --dsa-linea: #E3E8F0; --dsa-fondo: #F7F8FB; --dsa-fondo-alt: #F4F6FA; --dsa-blanco: #FFFFFF; /* --- Degradados --- */ --dsa-degradado: linear-gradient(135deg, #4BCDE7 0%, #5977B5 55%, #7F0977 100%); --dsa-degradado-escudo: linear-gradient(160deg, #4BCDE7 0%, #5977B5 60%, #6D2B8D 100%); --dsa-degradado-oscuro: linear-gradient(135deg, #171B45 0%, #4A1470 100%); /* --- Color por solución (rampa de marca, en el orden del menú) --- -c color de identidad (cintas, filetes, acentos de icono) -t versión oscura, segura para texto sobre blanco -l versión clara, para fondos navy -s fondo suave (chips, avisos) */ --sol-integridad-c: #4BCDE7; --sol-integridad-t: #0E5F86; --sol-integridad-l: #7FE0F2; --sol-integridad-s: #E8F8FC; --sol-personas-c: #2497C4; --sol-personas-t: #0E5F86; --sol-personas-l: #4BCDE7; --sol-personas-s: #E6F3F9; --sol-sostenib-c: #5977B5; --sol-sostenib-t: #34558F; --sol-sostenib-l: #A8BEEA; --sol-sostenib-s: #ECF0F9; --sol-formacion-c: #6D2B8D; --sol-formacion-t: #4E1D66; --sol-formacion-l: #C88FE0; --sol-formacion-s: #F3EAF8; --sol-agentes-c: #80148C; --sol-agentes-t: #5C0F66; --sol-agentes-l: #E393D8; --sol-agentes-s: #F8EAF7; --sol-servicios-c: #7F0977; --sol-servicios-t: #5C0A57; --sol-servicios-l: #EFA4E4; --sol-servicios-s: #F9E9F6; /* --- Familias normativas (sellos) --- */ --norma-privacidad: #2497C4; --norma-integridad: #0E5F86; --norma-ia: #80148C; --norma-sostenib: #5977B5; --norma-laboral: #6D2B8D; --norma-ciber: #171B45; --norma-penal: #7F0977; /* --- Semánticos de estado (los de la plataforma) --- */ /* Tonos de TEXTO (contraste AA sobre sus fondos suaves) */ --est-ok: #14724A; --est-ok-fondo: #E6F4EC; --est-aviso: #8A6206; --est-aviso-fondo: #FDF3E0; --est-riesgo: #B01449; --est-riesgo-fondo: #FDECF2; --est-critico: #8E0D36; --est-critico-fondo: #FBE3EA; --est-neutro: #5F5E5A; --est-neutro-fondo: #F4F6FA; /* Tonos de RELLENO (puntos, barras, gráficos: no llevan texto encima) */ --est-ok-fill: #1E8E5A; --est-aviso-fill: #B8860B; --est-riesgo-fill: #C2185B; /* --- Tipografía --- */ --dsa-font-titulo: 'Space Grotesk', system-ui, sans-serif; --dsa-font-ui: 'Outfit', system-ui, sans-serif; --dsa-font-texto: 'Plus Jakarta Sans', system-ui, sans-serif; /* --- Radios, sombras, espaciado --- */ --dsa-r-s: 6px; --dsa-r-m: 10px; --dsa-r-l: 14px; --dsa-r-pill: 999px; --dsa-sombra-card: 0 1px 2px rgba(23,27,69,.05), 0 8px 24px rgba(23,27,69,.06); --dsa-sombra-flotante: 0 18px 48px rgba(23,27,69,.16); --dsa-espacio-seccion: 88px; /* --- Rutas del kit (ajustar si cambia el prefijo) --- */ --dsa-kit: '/assets/kit'; } /* ============================================================ 1 · Ornamentos y marcas de agua Uso:
… ============================================================ */ .dsa-seccion { position: relative; overflow: hidden; } .dsa-orna { position: absolute; display: block; pointer-events: none; user-select: none; background-repeat: no-repeat; background-position: center; background-size: contain; } .dsa-orna--escudo-dcha { right: 0; top: 50%; transform: translate(34%, -50%); width: 560px; height: 560px; background-image: url(../ornamentos/ornamento-logo-compliance-tinta.svg); } .dsa-orna--escudo-izda { left: 0; bottom: 0; transform: translate(-26%, 26%); width: 620px; height: 620px; background-image: url(../ornamentos/ornamento-logo-compliance-blanco.svg); } .dsa-orna--flechas-dcha { right: 8px; top: -10%; width: 220px; height: 120%; background-image: url(../ornamentos/ornamento-flechas-tinta.svg); } .dsa-orna--globo-dcha { right: -60px; bottom: -80px; width: 420px; height: 420px; background-image: url(../ornamentos/ornamento-globo-reticula-tinta.svg); } .dsa-orna--angulo { left: 0; top: 0; width: 160px; height: 160px; background-image: url(../ornamentos/angulo-flechas-esquina.svg); } .dsa-seccion--oscura .dsa-orna--escudo-dcha { background-image: url(../ornamentos/ornamento-logo-compliance-blanco.svg); } .dsa-seccion--oscura .dsa-orna--flechas-dcha { background-image: url(../ornamentos/ornamento-flechas-blanco.svg); } .dsa-seccion--oscura .dsa-orna--globo-dcha { background-image: url(../ornamentos/ornamento-globo-reticula-blanco.svg); } /* Patrones de fondo */ .dsa-patron-flechas { background-image: url(../patrones/patron-flechas-tinta.svg); background-size: 64px 64px; } .dsa-patron-escudos { background-image: url(../patrones/patron-escudos-tinta.svg); background-size: 240px 240px; } .dsa-seccion--oscura.dsa-patron-flechas { background-image: url(../patrones/patron-flechas-blanco.svg); } .dsa-seccion--oscura.dsa-patron-escudos { background-image: url(../patrones/patron-escudos-blanco.svg); } .dsa-patron-desvanecido { mask-image: linear-gradient(180deg, #000 0%, transparent 100%); } /* ============================================================ 2 · Iconos Inline (hereda color y permite hover): … ============================================================ */ .dsa-ico { display: block; flex: none; width: 32px; height: 32px; color: var(--dsa-tinta); } .dsa-ico--s { width: 24px; height: 24px; } .dsa-ico--m { width: 32px; height: 32px; } .dsa-ico--l { width: 48px; height: 48px; } .dsa-ico--xl { width: 64px; height: 64px; } .dsa-ico--sol-integridad { --dsa-acento: var(--sol-integridad-c); } .dsa-ico--sol-personas { --dsa-acento: var(--sol-personas-c); } .dsa-ico--sol-sostenib { --dsa-acento: var(--sol-sostenib-c); } .dsa-ico--sol-formacion { --dsa-acento: var(--sol-formacion-c); } .dsa-ico--sol-agentes { --dsa-acento: var(--sol-agentes-c); } .dsa-ico--sol-servicios { --dsa-acento: var(--sol-servicios-c); } .dsa-ico--blanco { color: #fff; } /* Cápsula de icono (para cards y fichas) */ .dsa-ico-caja { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--dsa-r-m); background: var(--dsa-fondo-alt); border: 1px solid var(--dsa-linea); } .dsa-ico-caja--acento { background: var(--sol, var(--dsa-cian)); border-color: transparent; } /* ============================================================ 3 · Solución: cintas, filetes y chips Envolver cualquier bloque en .dsa-sol-- para heredar el color. ============================================================ */ .dsa-sol--integridad { --sol: var(--sol-integridad-c); --sol-t: var(--sol-integridad-t); --sol-l: var(--sol-integridad-l); --sol-s: var(--sol-integridad-s); } .dsa-sol--personas { --sol: var(--sol-personas-c); --sol-t: var(--sol-personas-t); --sol-l: var(--sol-personas-l); --sol-s: var(--sol-personas-s); } .dsa-sol--sostenib { --sol: var(--sol-sostenib-c); --sol-t: var(--sol-sostenib-t); --sol-l: var(--sol-sostenib-l); --sol-s: var(--sol-sostenib-s); } .dsa-sol--formacion { --sol: var(--sol-formacion-c); --sol-t: var(--sol-formacion-t); --sol-l: var(--sol-formacion-l); --sol-s: var(--sol-formacion-s); } .dsa-sol--agentes { --sol: var(--sol-agentes-c); --sol-t: var(--sol-agentes-t); --sol-l: var(--sol-agentes-l); --sol-s: var(--sol-agentes-s); } .dsa-sol--servicios { --sol: var(--sol-servicios-c); --sol-t: var(--sol-servicios-t); --sol-l: var(--sol-servicios-l); --sol-s: var(--sol-servicios-s); } .dsa-filete { border-top: 3px solid var(--sol, var(--dsa-cian)); } .dsa-filete-izda { border-left: 3px solid var(--sol, var(--dsa-cian)); } .dsa-cinta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dsa-font-ui); font-weight: 600; font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--sol-t, var(--dsa-azul)); } .dsa-cinta::before { content: ''; width: 22px; height: 3px; background: var(--sol, var(--dsa-cian)); border-radius: 2px; } .dsa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--dsa-r-pill); background: var(--sol-s, var(--dsa-fondo-alt)); color: var(--sol-t, var(--dsa-tinta)); font-family: var(--dsa-font-ui); font-weight: 600; font-size: 12px; line-height: 1; } /* ============================================================ 4 · Sellos normativos RGPDUE 2016/679 ============================================================ */ .dsa-sello { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 84px; padding: 9px 12px; text-align: center; border: 1.5px solid var(--norma, var(--dsa-azul)); border-radius: var(--dsa-r-s); background: #fff; color: var(--norma, var(--dsa-azul)); font-family: var(--dsa-font-ui); line-height: 1.15; } .dsa-sello b { font-family: var(--dsa-font-titulo); font-weight: 700; font-size: 13.5px; letter-spacing: .3px; } .dsa-sello small { font-size: 9.5px; letter-spacing: .6px; color: var(--dsa-texto-suave); } .dsa-sello--solido { background: var(--norma, var(--dsa-azul)); color: #fff; border-color: transparent; } .dsa-sello--solido small { color: rgba(255,255,255,.78); } .dsa-sello--privacidad { --norma: var(--norma-privacidad); } .dsa-sello--integridad { --norma: var(--norma-integridad); } .dsa-sello--ia { --norma: var(--norma-ia); } .dsa-sello--sostenib { --norma: var(--norma-sostenib); } .dsa-sello--laboral { --norma: var(--norma-laboral); } .dsa-sello--ciber { --norma: var(--norma-ciber); } .dsa-sello--penal { --norma: var(--norma-penal); } .dsa-sellos { display: flex; flex-wrap: wrap; gap: 10px; } /* ============================================================ 5 · Cards y bloques ============================================================ */ .dsa-card { background: #fff; border: 1px solid var(--dsa-linea); border-radius: var(--dsa-r-m); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .dsa-card--hover:hover { transform: translateY(-3px); box-shadow: var(--dsa-sombra-card); border-color: var(--sol, var(--dsa-cian)); } .dsa-card--oscura { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); color: #fff; } .dsa-dato { font-family: var(--dsa-font-titulo); font-weight: 700; font-size: 34px; color: var(--sol-t, var(--dsa-tinta)); line-height: 1; } .dsa-dato-etq { font-size: 12.5px; color: var(--dsa-texto-suave); } /* Barra de cumplimiento */ .dsa-barra { height: 8px; border-radius: var(--dsa-r-pill); background: var(--dsa-linea); overflow: hidden; } .dsa-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--sol, var(--dsa-cian)); width: var(--v, 0%); transition: width 1.1s cubic-bezier(.22,.7,.25,1); } /* Píldora de estado */ .dsa-estado { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--dsa-r-pill); font-family: var(--dsa-font-ui); font-weight: 600; font-size: 12px; line-height: 1; color: var(--est, var(--est-neutro)); background: var(--est-fondo, var(--est-neutro-fondo)); } .dsa-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dsa-estado--ok { --est: var(--est-ok); --est-fondo: var(--est-ok-fondo); } .dsa-estado--aviso { --est: var(--est-aviso); --est-fondo: var(--est-aviso-fondo); } .dsa-estado--riesgo { --est: var(--est-riesgo); --est-fondo: var(--est-riesgo-fondo); } /* ============================================================ 6 · Accesibilidad y print ============================================================ */ @media (prefers-reduced-motion: reduce) { .dsa-card--hover, .dsa-barra > span { transition: none; } } @media print { .dsa-orna { opacity: .5; } .dsa-card { box-shadow: none; } }