/* =========================================================================== IDENTIDAD VISUAL DE CODELINK — EL ÚNICO ARCHIVO DE TEMA (Bloque 0.7.3) Aquí viven TODOS los colores del portal. Ni las vistas ni portal.css escriben un color literal: todo referencia una variable de este archivo. Si mañana cambia la marca, se cambia aquí y en ningún otro sitio. CÓMO ESTÁ ORGANIZADO 1. Tonos de marca. Los del Bloque 0.7.3, TAL CUAL. No se tocan nunca, en ningún modo. Son la identidad. 2. Etiquetas sobre un tono relleno. Cuando un tono de marca es el FONDO de algo, el texto encima necesita su propio color. Ese color no es de marca: es una consecuencia del contraste. 3. Modo claro, escrito explícito. El Bloque 0.7.3 dice que la paleta define el modo OSCURO; el claro se deriva invirtiendo fondos y textos y se escribe aquí, no se deja al comportamiento por defecto. 4. Modo oscuro, con las asignaciones del Bloque 0.7.3 literales. 5. El puente con Bootstrap 5.3 y los componentes. CONTRASTE (Bloque 0.7.2). Los tonos de marca son vivos y están pensados para fondo oscuro: sobre fondo claro ninguno llega al mínimo COMO TEXTO —el esmeralda da 1,40:1 sobre blanco—. Por eso cada estado tiene DOS variables: el tono de marca, que no cambia, y su variante de texto, que sí cambia entre modos. Las variantes se derivaron bajando luminosidad sobre el MISMO matiz: el éxito sigue siendo verde y el error sigue siendo naranja, más oscuros. Cada valor y su contraste medido están en docs/identidad-visual.md, y una prueba ejecutable vuelve a medirlos sobre este archivo para que no se degraden con el tiempo. ICONOGRAFÍA. Bootstrap Icons es la familia ÚNICA de la iconografía funcional. Los activos de marca —logotipo, isotipo, favicon— conservan sus colores originales, porque un logotipo no se recolorea, y por eso el símbolo se presenta siempre sobre su placa Ink, que es su uso preferente según la hoja de marca. Nada se sirve desde un CDN. =========================================================================== */ :root { /* --------------------------------------------------------------------- 1. TONOS DE MARCA — Bloque 0.7.3, tal cual. Intocables. --------------------------------------------------------------------- */ --brand-purple: #9A66FF; --brand-purple-light: #D1B3FF; --brand-emerald: #42F5B8; --brand-orange: #FF5722; --brand-yellow: #FFB74D; --brand-blue: #3B82F6; --brand-pink: #FF66A1; --brand-dark: #343D46; --brand-dark-deep: #1E252B; --brand-light: #FFFFFF; --brand-gray: #B0BEC5; /* Acciones y estados: SIEMPRE el tono de marca, en los dos modos. */ --action-primary: var(--brand-purple); --action-secondary: var(--brand-purple-light); --state-info: var(--brand-blue); --state-success: var(--brand-emerald); --state-warning: var(--brand-yellow); --state-error: var(--brand-orange); --data-accent-1: var(--brand-pink); --data-accent-2: var(--brand-yellow); /* --------------------------------------------------------------------- 2. ETIQUETA SOBRE UN TONO RELLENO El tono es el fondo; esto es el texto encima. Igual en ambos modos, porque el fondo es el mismo tono en ambos modos. --------------------------------------------------------------------- */ --sobre-accion: #181D22; /* sobre --action-primary 4,62:1 */ --sobre-info: #181D22; /* sobre --state-info 4,61:1 */ --sobre-exito: #1E252B; /* sobre --state-success 11,06:1 */ --sobre-advertencia: #1E252B; /* sobre --state-warning 8,96:1 */ --sobre-error: #1E252B; /* sobre --state-error 4,90:1 */ --sobre-dato: #1E252B; /* sobre --data-accent-1 5,66:1 */ /* --------------------------------------------------------------------- 3. MODO CLARO — derivado de la misma paleta, escrito explícito. El fondo base es el gris de marca al 18 % sobre el blanco de marca: #B0BEC5 sobre #FFFFFF = #F1F3F5. No es un gris inventado. --------------------------------------------------------------------- */ --bg-base: #F1F3F5; --bg-primary: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #F8F9FA; --text-primary: var(--brand-dark-deep); /* 13,94:1 sobre --bg-base */ --text-secondary: #5B717D; /* 4,60:1 sobre --bg-base */ --text-inverse: var(--brand-light); --border-color: rgba(30, 37, 43, 0.14); --border-fuerte: rgba(30, 37, 43, 0.28); /* Estados como TEXTO y como insignia suave. Fondo = tono al 14 % sobre blanco; texto = mismo matiz, más oscuro, hasta pasar 4,5:1. */ --estado-exito-fondo: #E5FEF5; --estado-exito-texto: #078057; /* 4,68:1 */ --estado-advertencia-fondo: #FFF5E6; --estado-advertencia-texto: #A16000; /* 4,64:1 */ --estado-error-fondo: #FFE7E0; --estado-error-texto: #C73000; /* 4,61:1 */ --estado-info-fondo: #E4EEFE; --estado-info-texto: #0B60EC; /* 4,61:1 */ --estado-neutro-fondo: #EDEFF1; --estado-neutro-texto: #46555E; /* 6,69:1 */ --estado-dato-fondo: #FFEAF2; --estado-dato-texto: #D50052; /* 4,63:1 */ --accion-texto: #7C38FF; /* 5,43:1 sobre --bg-surface */ --accion-texto-rgb: 124, 56, 255; /* el mismo, descompuesto */ --accion-tinte: #F1EAFF; /* Superficies estructurales. La columna lateral sigue el modo. */ --lateral-fondo: var(--bg-primary); --lateral-texto: var(--text-secondary); --lateral-texto-activo: var(--text-primary); --lateral-activo-tinte: var(--accion-tinte); --encabezado-fondo: var(--bg-primary); /* La placa del logotipo es Ink en LOS DOS modos: el símbolo lleva los corchetes en blanco y sobre fondo claro desaparecería. La hoja de marca marca el uso sobre Ink como preferente. */ --marca-placa: var(--brand-dark-deep); /* El velo que oscurece la página detrás de un diálogo modal. Es Ink con alfa en LOS DOS modos: en claro hunde lo de detrás y en oscuro lo apaga. Un velo claro sobre fondo oscuro deslumbra, así que no se invierte. Vive aquí y no en el componente porque el Bloque 0.7.3 es literal: no se escriben colores literales fuera de este archivo. Lo cazó IdentidadVisualTests el 2026-08-26, con razón. */ --velo-modal: rgba(30, 37, 43, .55); --foco-anillo: var(--action-primary); --lateral-ancho: 16.5rem; /* ================== LA BANDA DE BASE DE PRUEBAS ====================== Vive aquí porque el Bloque 0.7.3 es literal —no se escriben colores fuera de este archivo— y lo cazó IdentidadVisualTests el 2026-08-28, con razón. Mismo camino que --velo-modal. PERO NO SIGUE LA PALETA DE MARCA, Y ESO ES DELIBERADO. Esta banda avisa de que el portal está sirviendo contra la base de PRUEBAS, y su trabajo es no parecerse a nada del producto: si se armonizara con la marca se leería como un elemento más de la interfaz, y a los diez minutos dejaría de verse. Es la única parte del portal que tiene permiso para ser fea. No se invierte en modo oscuro por lo mismo: un aviso que cambia de aspecto según el tema es un aviso que alguien puede confundir con decoración. Amarillo de obra, en los dos modos. */ --banda-pruebas-texto: #1f1300; --banda-pruebas-borde: #8a6d00; --banda-pruebas-raya-clara: #ffd75e; --banda-pruebas-raya-oscura: #ffc107; /* El realce del nombre de la base dentro de la banda. Blanco con alfa para que funcione sobre las dos rayas sin definir dos colores. */ --banda-pruebas-realce: rgba(255, 255, 255, .55); } /* ------------------------------------------------------------------------- 4. MODO OSCURO — las asignaciones del Bloque 0.7.3, literales. ------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --bg-base: var(--brand-dark-deep); --bg-primary: var(--brand-dark); --bg-surface: #2b333a; --bg-surface-alt: #323b43; --text-primary: var(--brand-light); /* 12,83:1 sobre --bg-surface */ --text-secondary: var(--brand-gray); /* 6,73:1 sobre --bg-surface */ --text-inverse: var(--brand-dark); --border-color: rgba(176, 189, 197, 0.15); --border-fuerte: rgba(176, 189, 197, 0.32); /* Fondo = tono al 20 % sobre --bg-surface; texto = mismo matiz aclarado sólo cuando el tono no llegaba por sí solo. */ --estado-exito-fondo: #305A53; --estado-exito-texto: var(--brand-emerald); /* 5,52:1 — el tono sirve */ --estado-advertencia-fondo: #554D3E; --estado-advertencia-texto: var(--brand-yellow); /* 4,82:1 — sirve */ --estado-error-fondo: #553A35; --estado-error-texto: #FF906D; /* 4,63:1 */ --estado-info-fondo: #2E4360; --estado-info-texto: #84B1F9; /* 4,62:1 */ --estado-neutro-fondo: #3A444C; --estado-neutro-texto: #C7D2D8; /* 6,46:1 */ --estado-dato-fondo: #553D4F; --estado-dato-texto: #FF91BB; /* 4,62:1 */ --accion-texto: #BF9FFF; /* 5,87:1 sobre --bg-surface */ --accion-texto-rgb: 191, 159, 255; --accion-tinte: #413D61; --lateral-fondo: var(--brand-dark-deep); --lateral-texto: var(--brand-gray); --lateral-texto-activo: var(--brand-light); --lateral-activo-tinte: var(--accion-tinte); --encabezado-fondo: var(--brand-dark); } /* ------------------------------------------------------------------------- 5. PUENTE CON BOOTSTRAP 5.3 Se alimentan sus variables en vez de reescribir sus componentes: es la arquitectura que el propio framework ofrece y que exige el Bloque 0.7. ------------------------------------------------------------------------- */ :root, [data-bs-theme="dark"] { --bs-body-bg: var(--bg-base); --bs-body-color: var(--text-primary); --bs-emphasis-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --bs-border-color: var(--border-color); --bs-border-color-translucent: var(--border-color); --bs-primary: var(--action-primary); --bs-primary-rgb: 154, 102, 255; /* --brand-purple descompuesto */ /* Bootstrap 5.3 pinta los enlaces con --bs-link-color-RGB, no con el hex: sin estas tres líneas el enlace se quedaba en el azul de fábrica y la identidad no llegaba al sitio más visitado de la interfaz. Una prueba comprueba que la descomposición coincide con el hex en los dos modos. */ --bs-link-color: var(--accion-texto); --bs-link-color-rgb: var(--accion-texto-rgb); --bs-link-hover-color: var(--accion-texto); --bs-link-hover-color-rgb: var(--accion-texto-rgb); --bs-focus-ring-color: var(--accion-tinte); /* Bootstrap trae valores propios para el código y el resaltado que NO son de esta paleta —su es un rosa #d63384—. Si no se mapean, se cuelan en la interfaz sin que el barrido de colores literales los vea, porque el literal está dentro del framework y no en nuestro CSS. */ --bs-code-color: var(--estado-dato-texto); --bs-highlight-bg: var(--estado-advertencia-fondo); --bs-highlight-color: var(--estado-advertencia-texto); --bs-form-invalid-color: var(--estado-error-texto); --bs-form-invalid-border-color: var(--state-error); --bs-form-valid-color: var(--estado-exito-texto); --bs-form-valid-border-color: var(--state-success); --bs-card-bg: var(--bg-surface); --bs-card-border-color: var(--border-color); --bs-heading-color: var(--text-primary); } .card, .list-group-item, .dropdown-menu, .offcanvas, .modal-content { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); } .table { --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-border-color: var(--border-color); --bs-table-striped-color: var(--text-primary); --bs-table-hover-color: var(--text-primary); } .form-control, .form-select { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-fuerte); } .form-control::placeholder { color: var(--text-secondary); } /* El foco por teclado se ve SIEMPRE y en un color que contrasta con los dos fondos (Bloque 0.7.2). Nada de suprimir el outline. */ :focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; } .form-control:focus, .form-select:focus { border-color: var(--action-primary); box-shadow: 0 0 0 .25rem var(--accion-tinte); } /* ---------------------------------------------------------------- botones */ .btn-primary { --bs-btn-bg: var(--action-primary); --bs-btn-border-color: var(--action-primary); --bs-btn-color: var(--sobre-accion); --bs-btn-hover-bg: var(--action-secondary); --bs-btn-hover-border-color: var(--action-secondary); --bs-btn-hover-color: var(--sobre-accion); --bs-btn-active-bg: var(--action-secondary); --bs-btn-active-border-color: var(--action-secondary); --bs-btn-active-color: var(--sobre-accion); --bs-btn-disabled-bg: var(--action-primary); --bs-btn-disabled-border-color: var(--action-primary); --bs-btn-disabled-color: var(--sobre-accion); } .btn-outline-primary { --bs-btn-color: var(--accion-texto); --bs-btn-border-color: var(--action-primary); --bs-btn-hover-bg: var(--action-primary); --bs-btn-hover-border-color: var(--action-primary); --bs-btn-hover-color: var(--sobre-accion); } .btn-outline-secondary { --bs-btn-color: var(--text-primary); --bs-btn-border-color: var(--border-fuerte); --bs-btn-hover-bg: var(--bg-surface-alt); --bs-btn-hover-border-color: var(--border-fuerte); --bs-btn-hover-color: var(--text-primary); } .btn-danger { --bs-btn-bg: var(--state-error); --bs-btn-border-color: var(--state-error); --bs-btn-color: var(--sobre-error); --bs-btn-hover-bg: var(--state-error); --bs-btn-hover-border-color: var(--state-error); --bs-btn-hover-color: var(--sobre-error); --bs-btn-active-bg: var(--state-error); --bs-btn-active-color: var(--sobre-error); } .btn-success { --bs-btn-bg: var(--state-success); --bs-btn-border-color: var(--state-success); --bs-btn-color: var(--sobre-exito); --bs-btn-hover-bg: var(--state-success); --bs-btn-hover-border-color: var(--state-success); --bs-btn-hover-color: var(--sobre-exito); } .btn-link { --bs-btn-color: var(--accion-texto); --bs-btn-hover-color: var(--accion-texto); } /* ------------------------------------------------- estados: color Y texto El mapeo entre el catálogo de estados y estas variables se decide en UN solo sitio del servidor —Presentacion/Estado.cs, que traduce el estado a su clase— y aquí se le da color. Ningún estado se distingue sólo por color: la insignia lleva SIEMPRE su texto, y además un icono con significado. Se usa la insignia SUAVE —tinte de fondo, borde del tono, texto en la variante legible— y no la rellena, porque con el morado y el azul rellenos ninguna etiqueta, ni blanca ni negra, alcanza 4,5:1. Así el tono de marca se conserva intacto en el borde y el texto siempre se lee. */ .badge.text-bg-success, .cdl-estado--exito { background-color: var(--estado-exito-fondo) !important; color: var(--estado-exito-texto) !important; border: 1px solid var(--state-success); } .badge.text-bg-warning, .cdl-estado--advertencia { background-color: var(--estado-advertencia-fondo) !important; color: var(--estado-advertencia-texto) !important; border: 1px solid var(--state-warning); } .badge.text-bg-danger, .cdl-estado--error { background-color: var(--estado-error-fondo) !important; color: var(--estado-error-texto) !important; border: 1px solid var(--state-error); } .badge.text-bg-info, .cdl-estado--info { background-color: var(--estado-info-fondo) !important; color: var(--estado-info-texto) !important; border: 1px solid var(--state-info); } .badge.text-bg-secondary, .badge.text-bg-dark, .cdl-estado--neutro { background-color: var(--estado-neutro-fondo) !important; color: var(--estado-neutro-texto) !important; border: 1px solid var(--border-fuerte); } .badge.text-bg-primary { background-color: var(--accion-tinte) !important; color: var(--accion-texto) !important; border: 1px solid var(--action-primary); } /* --------------------------------------------------------------- alertas */ .alert-success { --bs-alert-bg: var(--estado-exito-fondo); --bs-alert-color: var(--estado-exito-texto); --bs-alert-border-color: var(--state-success); } .alert-warning { --bs-alert-bg: var(--estado-advertencia-fondo); --bs-alert-color: var(--estado-advertencia-texto); --bs-alert-border-color: var(--state-warning); } .alert-danger { --bs-alert-bg: var(--estado-error-fondo); --bs-alert-color: var(--estado-error-texto); --bs-alert-border-color: var(--state-error); } .alert-info { --bs-alert-bg: var(--estado-info-fondo); --bs-alert-color: var(--estado-info-texto); --bs-alert-border-color: var(--state-info); } .alert-secondary { --bs-alert-bg: var(--estado-neutro-fondo); --bs-alert-color: var(--estado-neutro-texto); --bs-alert-border-color: var(--border-fuerte); } /* Texto suelto de color: siempre la variante legible, nunca el tono vivo. */ .text-success { color: var(--estado-exito-texto) !important; } .text-warning { color: var(--estado-advertencia-texto) !important; } .text-danger { color: var(--estado-error-texto) !important; } .text-info { color: var(--estado-info-texto) !important; } .text-primary { color: var(--accion-texto) !important; } .text-body-secondary, .text-muted { color: var(--text-secondary) !important; } .invalid-feedback { color: var(--estado-error-texto); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--state-error); }