/* -------------------------------------------------------------------------- Tokens visuales de EfiMuni: el único lugar, junto con las clases de Tema/*.cs, donde se declaran colores. Todo lo que no pasa por MudBlazor (login, fondo, avisos del shell, barra de error) los usa por var(--efimuni-*). Dos ejes, dos atributos de , los dos escritos por App.razor: - data-marca: el tema (gridit | institucional). Es un parámetro general, igual para todos; si cambia, el MainLayout lo actualiza en vivo (efimuniTema.aplicarMarca). - data-modo: claro | oscuro. Lo elige cada usuario (cookie efimuni_modo) y lo actualiza efimuniTema.guardarModo al tocar el selector de la barra. GridIT y el modo oscuro son los valores por defecto, así que van en :root y el resto los pisa. Las reglas de Institucional llevan los dos atributos (o un :not) para ganarle en especificidad a las de modo de GridIT, sin depender del orden. Se sirve como _content/Efimuni_UI/efimuni-ui.css y App.razor la carga antes que la hoja del shell. -------------------------------------------------------------------------- */ /* --- Paleta cruda de GridIT (manual de marca) ------------------------------ */ :root { --grid-naranja: #FA4616; --grid-naranja-oscuro: #C8330B; --grid-gris: #75787B; --grid-negro: #111111; --grid-claro: #F4F5F7; --grid-blanco: #FFFFFF; } /* --- Paleta cruda de Institucional (portal municipal) ---------------------- */ :root { --pm-azul: #1D3557; --pm-azul-medio: #2E5382; --pm-azul-claro: #E8EEF5; --pm-celeste: #6F9BD1; --pm-noche: #0F1B2D; --pm-gris-claro: #F1F3F5; --pm-borde: #DEE2E6; --pm-texto: #212529; --pm-texto-tenue: #6C757D; } /* --- Tema GridIT: lo que no depende del modo -------------------------------- */ :root { --efimuni-fuente: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --efimuni-radio: 16px; /* esquinas de contenedor */ --efimuni-radio-campo: 12px; /* campos y botones */ --efimuni-borde: rgba(117, 120, 123, 0.20); /* el "#75787B33" del manual */ --efimuni-boton-mayusculas: none; --efimuni-boton-espaciado: normal; /* El naranja es el color de los llamados a la acción. */ --efimuni-primario: var(--grid-naranja); --efimuni-primario-oscuro: var(--grid-naranja-oscuro); --efimuni-primario-texto: var(--grid-blanco); --efimuni-foco: rgba(250, 70, 22, 0.22); /* Barra de error de Blazor: la versión negativa de la marca. */ --efimuni-barra-error-fondo: var(--grid-negro); --efimuni-barra-error-texto: var(--grid-claro); } /* GridIT oscuro (por defecto). */ :root, :root[data-modo="oscuro"] { --efimuni-velo: rgba(0, 0, 0, 0.15); --efimuni-texto: var(--grid-claro); --efimuni-texto-tenue: #A5A9AD; --efimuni-texto-sombra: 0 2px 16px rgba(0, 0, 0, 0.65); --efimuni-superficie: #1B1C1E; --efimuni-superficie-alterna: #232427; --efimuni-borde-campo: rgba(244, 245, 247, 0.20); --efimuni-sombra: 0 18px 48px rgba(0, 0, 0, 0.55); --efimuni-error-fondo: rgba(239, 83, 80, 0.14); --efimuni-error-borde: rgba(239, 83, 80, 0.45); --efimuni-error-texto: #FF8A85; } /* GridIT claro. */ :root[data-modo="claro"] { --efimuni-velo: rgba(255, 255, 255, 0.10); --efimuni-texto: var(--grid-negro); --efimuni-texto-tenue: var(--grid-gris); --efimuni-texto-sombra: none; --efimuni-superficie: var(--grid-blanco); --efimuni-superficie-alterna: var(--grid-claro); --efimuni-borde-campo: rgba(117, 120, 123, 0.45); --efimuni-sombra: 0 18px 48px rgba(17, 17, 17, 0.16); --efimuni-error-fondo: #FDECEA; --efimuni-error-borde: rgba(198, 40, 40, 0.35); --efimuni-error-texto: #C62828; } /* --- Tema Institucional: lo que no depende del modo ------------------------- */ :root[data-marca="institucional"] { /* La pila de fuentes de Bootstrap 5, la del portal. */ --efimuni-fuente: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --efimuni-radio: 4px; --efimuni-radio-campo: 2px; --efimuni-borde: var(--pm-borde); --efimuni-boton-mayusculas: uppercase; --efimuni-boton-espaciado: 0.12em; --efimuni-barra-error-fondo: var(--pm-azul); --efimuni-barra-error-texto: var(--grid-blanco); } /* Institucional oscuro (por defecto). El azul marino no se lee sobre fondo oscuro: lo interactivo pasa a un celeste de la misma familia. */ :root[data-marca="institucional"]:not([data-modo="claro"]) { --efimuni-primario: var(--pm-celeste); --efimuni-primario-oscuro: #4F7DB8; --efimuni-primario-texto: var(--pm-noche); --efimuni-foco: rgba(111, 155, 209, 0.25); --efimuni-velo: rgba(0, 0, 0, 0.15); --efimuni-texto: var(--pm-azul-claro); --efimuni-texto-tenue: #9FB0C5; --efimuni-texto-sombra: 0 2px 16px rgba(0, 0, 0, 0.65); --efimuni-superficie: #16243A; --efimuni-superficie-alterna: #1D2E48; --efimuni-borde: rgba(232, 238, 245, 0.12); --efimuni-borde-campo: rgba(232, 238, 245, 0.30); --efimuni-sombra: 0 18px 48px rgba(0, 0, 0, 0.55); --efimuni-error-fondo: rgba(239, 107, 119, 0.14); --efimuni-error-borde: rgba(239, 107, 119, 0.45); --efimuni-error-texto: #EF6B77; } /* Institucional claro: el portal tal cual. */ :root[data-marca="institucional"][data-modo="claro"] { --efimuni-primario: var(--pm-azul); --efimuni-primario-oscuro: var(--pm-azul-medio); --efimuni-primario-texto: var(--grid-blanco); --efimuni-foco: rgba(46, 83, 130, 0.20); --efimuni-velo: rgba(255, 255, 255, 0.10); --efimuni-texto: var(--pm-texto); --efimuni-texto-tenue: var(--pm-texto-tenue); --efimuni-texto-sombra: none; --efimuni-superficie: var(--grid-blanco); --efimuni-superficie-alterna: var(--pm-gris-claro); --efimuni-borde-campo: #CED4DA; --efimuni-sombra: 0 2px 16px rgba(0, 0, 0, 0.12); --efimuni-error-fondo: #F8D7DA; --efimuni-error-borde: rgba(220, 53, 69, 0.35); --efimuni-error-texto: #842029; } /* ---- EditorPermisos ------------------------------------------------------------------ Dos listas con la estructura del menú (asignados a la izquierda, catálogo a la derecha) y la descripción de lo seleccionado abajo. */ .efimuni-permisos { display: flex; flex-direction: column; gap: 12px; } .efimuni-permisos-listas { display: grid; /* Casi iguales: la de asignados, apenas más ancha por las columnas de tildes. */ grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); gap: 12px; align-items: start; } /* En consulta sólo está la lista de asignados: ocupa todo el ancho. */ .efimuni-permisos-listas-consulta { grid-template-columns: minmax(0, 1fr); } @media (max-width: 960px) { .efimuni-permisos-listas { grid-template-columns: minmax(0, 1fr); } } .efimuni-permisos-lista { border: 1px solid var(--efimuni-borde); border-radius: var(--efimuni-radio-campo); max-height: 420px; overflow: auto; } .efimuni-permisos-titulo { position: sticky; top: 0; z-index: 1; padding: 6px 10px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--efimuni-borde); } .efimuni-permisos-lista table { width: 100%; border-collapse: collapse; } .efimuni-permisos-lista th { text-align: left; font-weight: 500; font-size: 0.75rem; color: var(--mud-palette-text-secondary); padding: 4px 8px; } .efimuni-permisos-lista td { padding: 4px 8px; } /* Las columnas de tildes, y sus títulos, lo más angostas posible: el nombre se lleva el resto. */ .efimuni-permisos-lista td:not(:first-child), .efimuni-permisos-lista th:not(:first-child) { width: 1%; white-space: nowrap; text-align: center; padding: 0 2px; } .efimuni-permisos-lista .efimuni-permisos-origen { width: auto; min-width: 160px; text-align: left; padding: 0 8px; } .efimuni-permisos-lista .mud-checkbox .mud-button-root { padding: 4px; } .efimuni-permisos-nombre { display: flex; align-items: center; gap: 6px; min-height: 26px; } .efimuni-permisos-rama td { text-align: left !important; padding: 0 8px !important; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray); height: 26px; } .efimuni-permisos-fila { cursor: pointer; user-select: none; } .efimuni-permisos-fila:hover { background: var(--mud-palette-action-default-hover); } .efimuni-permisos-seleccionada, .efimuni-permisos-seleccionada:hover { background: var(--efimuni-foco); } .efimuni-permisos-atenuada { opacity: 0.55; } .efimuni-permisos-programa { font-weight: 500; } /* La tarea cuelga de su programa: flecha bajo el ícono del programa y el título más adentro. */ .efimuni-permisos-tarea { padding-left: 28px !important; } .efimuni-permisos-flecha-tarea { color: var(--mud-palette-text-secondary); } .efimuni-permisos-codigo { font-size: 0.72rem; font-weight: 400; color: var(--mud-palette-text-secondary); } .efimuni-permisos-origen { font-size: 0.8rem; color: var(--mud-palette-text-secondary); } .efimuni-permisos-botones { display: flex; flex-direction: column; gap: 8px; align-self: center; } .efimuni-permisos-descripcion { border: 1px solid var(--efimuni-borde); border-radius: var(--efimuni-radio-campo); padding: 8px 12px; min-height: 56px; }