/* ============================================================= AngelNet — Legacy Bridge CSS Versión: 1.0 | Abril 2026 Propósito: Alinear el skin visual del WebForms legacy (ASP.NET 4.8 + DevExpress Mulberry + Bootstrap 3) con el Design System Angular 17. CÓMO USAR: Agregar este al final del en el Site.master (o en la MasterPage que corresponda), DESPUÉS de bootstrap.min.css y los temas DevExpress: No modifica el HTML ni el code-behind. Solo sobreescribe estilos. ============================================================= */ /* ─── Google Fonts: Inter ─────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ─── Variables (CSS Custom Properties) ───────────────────────── Disponibles en todos los navegadores modernos (IE11 no soportado). Para IE11 los valores fallback hardcoded están en cada regla. */ :root { --an-primary-50: #EFF6FF; --an-primary-100: #DBEAFE; --an-primary-600: #2F6FED; --an-primary-700: #1D4ED8; --an-primary-800: #1E40AF; --an-primary-900: #1E3A8A; --an-surface-body: #F8FAFC; --an-surface-card: #FFFFFF; --an-surface-hover: #F1F5F9; --an-surface-active: #E2E8F0; --an-surface-subtle: #F8FAFC; --an-text-primary: #0F172A; --an-text-secondary: #475569; --an-text-tertiary: #94A3B8; --an-text-on-primary:#FFFFFF; --an-success-500: #22C55E; --an-success-100: #DCFCE7; --an-success-600: #16A34A; --an-success-700: #15803D; --an-warning-500: #F59E0B; --an-warning-100: #FEF3C7; --an-warning-600: #D97706; --an-error-500: #EF4444; --an-error-100: #FEE2E2; --an-error-600: #DC2626; --an-error-700: #B91C1C; --an-info-500: #0EA5E9; --an-info-100: #E0F2FE; --an-info-600: #0284C7; --an-legacy-bg: #FFF7ED; --an-legacy-fg: #C2410C; --an-legacy-border: #FED7AA; --an-border-light: #F1F5F9; --an-border-default: #E2E8F0; --an-border-strong: #CBD5E1; /* Semáforo v2 — tokens para filas del datagrid */ --an-sem-rojo-bg: #FEF2F2; --an-sem-rojo-bar: #DC2626; --an-sem-amar-bg: #FFFBEB; --an-sem-amar-bar: #F59E0B; --an-sem-verde-bg: #F0FDF4; --an-sem-verde-bar: #16A34A; --an-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --an-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04); --an-radius-sm: 6px; --an-radius-md: 8px; --an-radius-lg: 12px; --an-radius-full:9999px; --an-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --an-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); --an-ring-focus: 0 0 0 3px rgba(59, 130, 246, 0.15); } /* ══════════════════════════════════════════════════════════════ 1. TIPOGRAFÍA GLOBAL Reemplaza Helvetica Neue / Segoe UI por Inter en toda la app. ══════════════════════════════════════════════════════════════ */ body, .dxgvControl_MulberryAngelNet, .dxgvDisabled_MulberryAngelNet, .dxtiControl_MulberryAngelNet, .dxpnlControl_MulberryAngelNet, .dxeTextBox_MulberryAngelNet, .dxeComboBox_MulberryAngelNet, .dxeDateBox_MulberryAngelNet, .dxtcLite_MulberryAngelNet, .dxbButton_MulberryAngelNet, .dxbButtonSys, .defaultFont, .titulosEstilo, .titulosPopups, .titulosNotficaciones, .valorNotficaciones, input, select, textarea, button, .btn, .navbar, .nav { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tamaño base */ body { font-size: 14px !important; color: var(--an-text-primary) !important; background-color: var(--an-surface-body) !important; } /* ══════════════════════════════════════════════════════════════ 2. SCROLLBARS Alineadas al Angular shell: 6px, thumb slate-200. ══════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px !important; height: 6px !important; background: transparent !important; } ::-webkit-scrollbar-track { background: transparent !important; border: none !important; } ::-webkit-scrollbar-thumb { background: var(--an-border-default) !important; border-radius: 9999px !important; border: none !important; } ::-webkit-scrollbar-thumb:hover { background: var(--an-border-strong) !important; } ::-webkit-scrollbar-thumb:window-inactive { background: var(--an-border-default) !important; } /* ══════════════════════════════════════════════════════════════ 3. NAVBAR / TOPBAR El legacy usa .navbar con color #4a7db0. Lo alineamos al topbar Angular: blanco, sombra suave, 56px. ══════════════════════════════════════════════════════════════ */ .navbar, .dxpnlControl.header-panel { background-color: var(--an-surface-card) !important; background-image: none !important; border-bottom: 1px solid var(--an-border-default) !important; box-shadow: var(--an-shadow-sm) !important; min-height: 56px !important; padding: 0 16px !important; } /* Logo / brand en navbar */ .navbar-brand, .menu-button { background: transparent !important; border: none !important; } /* Botón hamburguesa heredado */ .menu-button { height: 56px !important; color: #475569 !important; } .menu-button:hover { background: #F1F5F9 !important; } /* Avatar de usuario (círculo azul en topbar) */ .usuarioSession { background: var(--an-brand-gradient) !important; border-radius: 50% !important; width: 32px; height: 32px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 13px !important; font-weight: 600 !important; color: var(--an-text-on-primary) !important; letter-spacing: 0 !important; } /* Botón naranja de notificaciones → azul de marca */ .right-button { background-color: var(--an-primary-600) !important; box-shadow: none !important; } .right-button:hover { background-color: var(--an-primary-700) !important; } /* Menú inferior de navegación */ .menuinferior { background-color: var(--an-primary-600) !important; } /* ══════════════════════════════════════════════════════════════ 4. TOOLBAR DE MÓDULO (Nuevo / Editar / Borrar / Exportar…) DevExpress Panel fijo en top con botones de acción. ══════════════════════════════════════════════════════════════ */ .dxpnl-edge.t, .dxpnlControl.dxpnl-edge { background-color: var(--an-surface-card) !important; border-bottom: 1px solid var(--an-border-default) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } .dxpnlControl.dxpnl-edge, .dxpnlControl.dxpnl-edge .dxpnl-scc, .dxpnlControl.dxpnl-bar { padding: 6px 12px !important; } /* Botones DevExpress dentro del toolbar */ .dxbButton_MulberryAngelNet, .dxbButton { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: var(--an-text-primary) !important; background: var(--an-surface-card) !important; background-image: none !important; border: 1px solid var(--an-border-default) !important; border-radius: var(--an-radius-md) !important; padding: 5px 12px !important; transition: var(--an-transition) !important; box-shadow: none !important; } .dxbButton_MulberryAngelNet:hover, .dxbButton:hover { background: var(--an-surface-hover) !important; border-color: var(--an-border-strong) !important; } /* ══════════════════════════════════════════════════════════════ 6. SEMANTIC STATUS OVERRIDES (Success, Warning, Error) Overrides legacy #5C9F43 green and other old status colors. ══════════════════════════════════════════════════════════════ */ .btn-success, div.btn-success, #lblMensaje.btn-success, .alert-success { background-color: var(--an-success-600) !important; border-color: var(--an-success-600) !important; color: var(--an-text-on-primary) !important; } .btn-success:hover { background-color: var(--an-success-700) !important; border-color: var(--an-success-700) !important; } .btn-warning, .alert-warning { background-color: var(--an-warning-500) !important; border-color: var(--an-warning-500) !important; color: var(--an-text-on-primary) !important; } .btn-danger, .btn-error, .alert-danger { background-color: var(--an-error-600) !important; border-color: var(--an-error-600) !important; color: var(--an-text-on-primary) !important; } .dxbButton_MulberryAngelNet:active, .dxbButton:active { background: var(--an-surface-active) !important; } .dxbButton_MulberryAngelNet:focus, .dxbButton:focus { box-shadow: var(--an-ring-focus) !important; outline: none !important; } /* Botón primario (Guardar, Nuevo) — identificado por imagen de disquete/check */ .dxbButton_MulberryAngelNet.btn-primary, .btn-guardar, .btn-nuevo { background: var(--an-primary-600) !important; background-image: none !important; border-color: var(--an-primary-600) !important; color: var(--an-text-on-primary) !important; } .dxbButton_MulberryAngelNet.btn-primary:hover, .btn-guardar:hover, .btn-nuevo:hover { background: var(--an-primary-700) !important; border-color: var(--an-primary-700) !important; } /* ══════════════════════════════════════════════════════════════ 5. BOOTSTRAP BUTTONS (usados en formularios) ══════════════════════════════════════════════════════════════ */ .btn { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; border-radius: var(--an-radius-md) !important; padding: 6px 14px !important; transition: var(--an-transition) !important; box-shadow: none !important; letter-spacing: 0 !important; } .btn:focus, .btn:active:focus, .btn.active:focus { box-shadow: var(--an-ring-focus) !important; outline: none !important; } .btn-primary { background-color: var(--an-primary-600) !important; border-color: var(--an-primary-600) !important; color: var(--an-text-on-primary) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--an-primary-700) !important; border-color: var(--an-primary-700) !important; } .btn-primary:active { background-color: var(--an-primary-800) !important; border-color: var(--an-primary-800) !important; } .btn-primary:disabled, .btn-primary.disabled { opacity: 0.45 !important; cursor: not-allowed !important; } .btn-default, .btn-secondary { background-color: var(--an-surface-card) !important; border-color: var(--an-border-default) !important; color: var(--an-text-primary) !important; } .btn-default:hover, .btn-secondary:hover { background-color: var(--an-surface-hover) !important; border-color: var(--an-border-strong) !important; } .btn-danger { background-color: var(--an-error-600) !important; border-color: var(--an-error-600) !important; color: var(--an-text-on-primary) !important; } .btn-danger:hover { background-color: var(--an-error-700) !important; border-color: var(--an-error-700) !important; } .btn-success { background-color: var(--an-success-500) !important; border-color: var(--an-success-500) !important; } .btn-success:hover { background-color: var(--an-success-600) !important; border-color: var(--an-success-600) !important; } .btn-warning { background-color: var(--an-warning-500) !important; border-color: var(--an-warning-500) !important; color: var(--an-text-on-primary) !important; } .btn-sm { font-size: 12px !important; padding: 4px 10px !important; border-radius: 6px !important; } /* ══════════════════════════════════════════════════════════════ 6. INPUTS / FIELDS DevExpress TextBox, ComboBox, DateEdit + inputs Bootstrap. ══════════════════════════════════════════════════════════════ */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="date"], select, textarea, .dxeTextBox_MulberryAngelNet input, .dxeComboBox_MulberryAngelNet input, .dxeDateBox_MulberryAngelNet input, .form-control { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: var(--an-text-primary) !important; background-color: var(--an-surface-card) !important; border: 1px solid var(--an-border-default) !important; border-radius: var(--an-radius-sm) !important; padding: 5px 10px !important; height: 32px !important; transition: var(--an-transition) !important; box-shadow: none !important; outline: none !important; } input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="date"]:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--an-primary-500) !important; box-shadow: var(--an-ring-focus) !important; outline: none !important; } /* DevExpress: borde del control al seleccionar */ .dxeTextBox_MulberryAngelNet.dxeEditAreaSys, .dxeComboBox_MulberryAngelNet.dxeEditAreaSys { border-color: var(--an-primary-500) !important; box-shadow: var(--an-ring-focus) !important; } /* DevExpress combo/date/text renderizado como Bootstrap aplica height a inputs, pero DX usa una tabla — lo corregimos globalmente */ table.dxeButtonEditSys.form-control, table.dxeButtonEdit.form-control { height: 32px !important; max-height: 32px !important; width: 100% !important; /* anula el width inline que inyecta DevExpress */ max-width: 100% !important; border-radius: var(--an-radius-sm) !important; border: 1px solid var(--an-border-default) !important; background-color: var(--an-surface-card) !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; padding: 0 !important; } table.dxeButtonEditSys.form-control td, table.dxeButtonEdit.form-control td { padding: 0 !important; vertical-align: middle !important; } table.dxeButtonEditSys.form-control .dxeEditArea, table.dxeButtonEdit.form-control .dxeEditArea { padding: 0 8px !important; font-size: 13px !important; line-height: 30px !important; color: var(--an-text-primary) !important; } table.dxeButtonEditSys.form-control .dxeButtonEditButton, table.dxeButtonEdit.form-control .dxeButtonEditButton { width: 28px !important; border-left: 1px solid var(--an-border-default) !important; background-color: var(--an-surface-subtle, #f8fafc) !important; border-radius: 0 var(--an-radius-sm) var(--an-radius-sm) 0 !important; } /* ── Popups de selector (combo + botón ejecutar): Formatos, DetalladoPor, ConfiguracionGrid, etc. Patrón: modal con un combo DX y botones de acción */ #popupFormatos .modal-dialog, #popupDetalladoPor .modal-dialog { max-width: 480px; } #popupConfiguracionGrid .modal-dialog { max-width: 860px; } #popupFormatos .row, #popupDetalladoPor .row, #popupConfiguracionGrid .row { height: auto !important; padding: 16px 24px !important; gap: 8px; flex-wrap: nowrap; align-items: center; } /* El row del popup actúa como flex container para que el combo llene el espacio */ #popupFormatos .row, #popupDetalladoPor .row, #popupConfiguracionGrid .row { display: flex !important; } /* Combo ocupa todo el espacio disponible, respetando el padding del row */ #popupFormatos .row table.dxeButtonEditSys, #popupDetalladoPor .row table.dxeButtonEditSys, #popupConfiguracionGrid .row table.dxeButtonEditSys { flex: 1 1 0% !important; width: 0 !important; /* fuerza flex a calcular el ancho, ignora el inline width de DX */ min-width: 0 !important; } /* Labels de campo */ label, .control-label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--an-text-secondary) !important; margin-bottom: 4px !important; } /* Textarea */ textarea.form-control { height: auto !important; min-height: 72px !important; } input[readonly] { background-color: var(--an-surface-subtle) !important; cursor: default !important; color: var(--an-text-secondary) !important; } .error, .input-error { border-color: var(--an-error-500) !important; background-color: var(--an-sem-rojo-bg) !important; } /* ══════════════════════════════════════════════════════════════ 7. DEVEXPRESS GRID (Mulberry theme override) El color legacy es #4a7db0. Lo reemplazamos con la paleta AngelNet. ══════════════════════════════════════════════════════════════ */ /* Contenedor general */ .dxgvControl_MulberryAngelNet, .dxgvDisabled_MulberryAngelNet { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: var(--an-text-primary) !important; background-color: var(--an-surface-card) !important; border: 1px solid var(--an-border-default) !important; border-radius: var(--an-radius-md) !important; overflow: hidden !important; } /* Cabecera de columnas */ .dxgvHeader_MulberryAngelNet td, .dxgvHeader_MulberryAngelNet th { font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--an-text-secondary) !important; background-color: var(--an-surface-body) !important; border-bottom: 1px solid var(--an-border-default) !important; padding: 8px 12px !important; white-space: nowrap !important; } /* Filas de datos */ .dxgvDataRow_MulberryAngelNet td { font-size: 13px !important; color: var(--an-text-primary) !important; padding: 6px 12px !important; border-bottom: 1px solid var(--an-border-light) !important; height: 36px !important; vertical-align: middle !important; } /* Hover de fila */ .dxgvDataRow_MulberryAngelNet:hover td { background-color: var(--an-surface-hover) !important; } /* Fila seleccionada / foco — antes era #4a7db0 */ .dxgvFocusedRow_MulberryAngelNet td, .dxgvFocusedRow_MulberryAngelNet { background-color: var(--an-primary-50) !important; color: var(--an-primary-900) !important; border-left: 3px solid var(--an-primary-700) !important; } .dxgvFocusedRow_MulberryAngelNet td:first-child { padding-left: 9px !important; /* compensa el border-left de 3px */ } /* Multi-selección — antes era #a6bedc */ .dxgvSelectedRow_MulberryAngelNet td, .dxgvSelectedRow_MulberryAngelNet { background-color: var(--an-primary-100) !important; color: var(--an-primary-900) !important; } /* Fila de grupo */ .dxgvGroupRow_MulberryAngelNet td { background-color: var(--an-surface-subtle) !important; color: var(--an-text-secondary) !important; font-weight: 600 !important; font-size: 12px !important; border-bottom: 1px solid var(--an-border-default) !important; } .dxgvFocusedGroupRow_MulberryAngelNet td { background-color: var(--an-primary-50) !important; color: var(--an-primary-900) !important; } /* Footer / totales del grid */ .dxgvFooter_MulberryAngelNet td { background-color: var(--an-surface-subtle) !important; border-top: 1px solid var(--an-border-default) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--an-text-secondary) !important; padding: 6px 12px !important; } /* Paginador DevExpress */ .dxpLite_MulberryAngelNet { font-family: 'Inter', sans-serif !important; font-size: 12px !important; color: var(--an-text-secondary) !important; padding: 6px 12px !important; border-top: 1px solid var(--an-border-default) !important; background: var(--an-surface-card) !important; } .dxpLite_MulberryAngelNet .dxp-button, .dxpLite_MulberryAngelNet a { color: var(--an-primary-600) !important; text-decoration: none !important; padding: 2px 6px !important; border-radius: 4px !important; transition: background 150ms ease !important; } .dxpLite_MulberryAngelNet .dxp-button:hover, .dxpLite_MulberryAngelNet a:hover { background: var(--an-primary-50) !important; } /* Página activa — antes era #4a7db0 */ .dxpLite_MulberryAngelNet .dxp-current { background-color: var(--an-primary-600) !important; color: var(--an-text-on-primary) !important; border-radius: 4px !important; text-decoration: none !important; padding: 2px 8px !important; } /* Icono de filtro en columnas */ .dxgvFilterRow_MulberryAngelNet td { background: var(--an-surface-subtle) !important; padding: 4px 8px !important; border-bottom: 1px solid var(--an-border-default) !important; } /* ══════════════════════════════════════════════════════════════ 8. DEVEXPRESS TABS ══════════════════════════════════════════════════════════════ */ .dxtcLite_MulberryAngelNet > .dxtc-stripContainer { border-bottom: 1px solid #E2E8F0 !important; background: transparent !important; padding: 0 4px !important; } /* Tab inactivo */ .dxtcLite_MulberryAngelNet > .dxtc-stripContainer .dxtc-tab .dxtc-link { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #475569 !important; padding: 8px 16px !important; border-radius: 6px 6px 0 0 !important; border: 1px solid transparent !important; border-bottom: none !important; transition: color 150ms ease, background 150ms ease !important; text-decoration: none !important; } .dxtcLite_MulberryAngelNet > .dxtc-stripContainer .dxtc-tab:hover .dxtc-link { color: #0F172A !important; background: #F1F5F9 !important; } /* Tab activo */ .dxtcLite_MulberryAngelNet > .dxtc-stripContainer .dxtc-activeTab .dxtc-link { color: var(--an-primary-900) !important; font-weight: 600 !important; background: var(--an-surface-card) !important; border-color: var(--an-border-default) !important; border-bottom-color: var(--an-surface-card) !important; } /* Panel de contenido del tab */ .dxtcLite_MulberryAngelNet > .dxtc-content { border: 1px solid var(--an-border-default) !important; border-top: none !important; border-radius: 0 0 var(--an-radius-md) var(--an-radius-md) !important; background: var(--an-surface-card) !important; padding: 16px !important; } /* ══════════════════════════════════════════════════════════════ 9. CARDS / PANELES DE FORMULARIO Secciones como "Datos Generales" dentro del form. ══════════════════════════════════════════════════════════════ */ .panel, .panel-default { border: 1px solid var(--an-border-default) !important; border-radius: var(--an-radius-lg) !important; box-shadow: var(--an-shadow-sm) !important; margin-bottom: 16px !important; } .panel-heading, .panel-default > .panel-heading { background-color: var(--an-surface-body) !important; border-bottom: 1px solid var(--an-border-default) !important; border-radius: var(--an-radius-lg) var(--an-radius-lg) 0 0 !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--an-text-primary) !important; } .panel-body { padding: 16px !important; background: #FFFFFF !important; } /* Títulos de sección dentro del formulario (Datos Generales, CIP Detalle…) */ .titulosEstilo, h4.form-section-title, .form-section-title { font-size: 13px !important; font-weight: 600 !important; color: #0F172A !important; padding: 10px 0 6px !important; margin-bottom: 12px !important; border-bottom: 1px solid #E2E8F0 !important; font-family: 'Inter', sans-serif !important; } /* ══════════════════════════════════════════════════════════════ 10. POPUP / MODAL (DevExpress Popup) ══════════════════════════════════════════════════════════════ */ .dxpc-headerText { font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: #0F172A !important; line-height: 1.4 !important; } /* Backdrop del modal */ .dxpc-shadow, .dx-underlay { background-color: rgba(0,0,0,0.4) !important; } /* Ventana del popup */ .dxpcLite_MulberryAngelNet, .dxpc-body { border-radius: var(--an-radius-lg) !important; border: 1px solid var(--an-border-default) !important; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04) !important; overflow: hidden !important; } .dxpc-header, .dxpcLite_MulberryAngelNet .dxpc-header { background: var(--an-surface-card) !important; border-bottom: 1px solid var(--an-border-default) !important; padding: 12px 16px !important; } .dxpc-content { background: var(--an-surface-card) !important; padding: 16px !important; } /* ══════════════════════════════════════════════════════════════ 11. TOASTR / NOTIFICACIONES ══════════════════════════════════════════════════════════════ */ #toast-container > .toast { font-family: 'Inter', sans-serif !important; font-size: 13px !important; border-radius: 8px !important; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04) !important; opacity: 1 !important; } #toast-container > .toast-success { background-color: var(--an-success-500) !important; } #toast-container > .toast-error { background-color: var(--an-error-500) !important; } #toast-container > .toast-warning { background-color: var(--an-warning-500) !important; } #toast-container > .toast-info { background-color: var(--an-primary-600) !important; } /* Badge de notificaciones en topbar */ .notification-count-simple { background: var(--an-error-500) !important; border: 2px solid var(--an-surface-card) !important; font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; min-width: 18px !important; height: 18px !important; box-shadow: none !important; } .notification-badge-simple { color: var(--an-primary-600) !important; border-color: var(--an-border-default) !important; border-radius: var(--an-radius-md) !important; font-size: 18px !important; } .notification-badge-simple:hover { background: var(--an-surface-hover) !important; } /* ══════════════════════════════════════════════════════════════ 12. BANNER VISTA LEGACY Idéntico al LegacyBridge del Angular shell. Mostrar cuando un módulo NO está migrado. Usar clase .legacy-banner en el elemento contenedor. ══════════════════════════════════════════════════════════════ */ .legacy-banner { background-color: #FFF7ED !important; border-bottom: 1px solid #FED7AA !important; color: #C2410C !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; padding: 6px 16px !important; display: flex !important; align-items: center !important; gap: 8px !important; } /* Badge "L" para módulos legacy en menú */ .legacy-badge { display: inline-flex; align-items: center; justify-content: center; background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; border-radius: 9999px; font-size: 10px; font-weight: 600; width: 16px; height: 16px; margin-left: 4px; line-height: 1; font-family: 'Inter', sans-serif; } /* ══════════════════════════════════════════════════════════════ 13. CHECKBOX / RADIO en grids ══════════════════════════════════════════════════════════════ */ .dxgvDataRow_MulberryAngelNet .dxICheckBox_MulberryAngelNet, .dxgvInlineEditRow_MulberryAngelNet .dxICheckBox_MulberryAngelNet { accent-color: var(--an-primary-600) !important; width: 14px !important; height: 14px !important; } /* ══════════════════════════════════════════════════════════════ 14. LINKS ══════════════════════════════════════════════════════════════ */ a { color: var(--an-primary-600) !important; text-decoration: none !important; transition: var(--an-transition) !important; } a:hover { color: var(--an-primary-700) !important; text-decoration: underline !important; } /* ══════════════════════════════════════════════════════════════ 15. ESTADO DE ERROR / VALIDACIÓN ══════════════════════════════════════════════════════════════ */ .has-error .form-control, .has-error input, .has-error select { border-color: var(--an-error-500) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; } .has-error .control-label, .has-error .help-block { color: var(--an-error-600) !important; } .help-block { font-size: 12px !important; color: var(--an-text-secondary) !important; margin-top: 3px !important; } /* ══════════════════════════════════════════════════════════════ 16. UBICACION GRID (contenedor de grilla legacy) Reemplaza el inset-shadow azul por sombra suave del DS. ══════════════════════════════════════════════════════════════ */ .ubicacionGrid { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; background: #FFFFFF !important; } /* ══════════════════════════════════════════════════════════════ 17. TOOLBAR COMPACTA — MODO EMBEDDED (iframe Angular Shell) ────────────────────────────────────────────────────────────── Objetivo: reducir la barra de acciones a 44px de alto, mostrar botones con ícono encima + label debajo (estilo imagen objetivo), y alinear la búsqueda a la derecha. ══════════════════════════════════════════════════════════════ */ /* ── 17.1 Título del módulo con contador (ej. "Zonas Geográficas / 8 registros") ── */ .an-module-header { display: flex !important; align-items: baseline !important; gap: 10px !important; padding: 14px 16px 10px !important; background: transparent !important; } .an-module-title { font-family: var(--an-font) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--an-text-primary) !important; line-height: 1.2 !important; margin: 0 !important; } .an-module-meta { font-family: var(--an-font) !important; font-size: 12px !important; color: var(--an-text-tertiary) !important; font-weight: 400 !important; } /* ── 17.2 Contenedor de la toolbar: dx:ASPxMenu ID=MenuPrincipal ── */ /* DevExpress renderiza ASPxMenu como una tabla con clase .dxm-control. Lo ponemos en flex-row para que los items queden en línea y compactos. */ #MenuPrincipal, .dxm-control { background: #FFFFFF !important; border-bottom: 1px solid var(--an-border-default) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; padding: 2px 8px !important; min-height: 72px !important; width: 100% !important; } /* La tabla interna de items → display flex */ #MenuPrincipal > table, .dxm-control > table { width: 100% !important; } #MenuPrincipal > table > tbody > tr, .dxm-control > table > tbody > tr { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; } /* Cada . Estos selectores de clase son para módulos que ya usan clases CSS en lugar de BackColor inline (patrón recomendado para migraciones nuevas). Para BackColor inline, actualizar el VB según el patrón de frmCompras. ══════════════════════════════════════════════════════════════ */ /* Clase CSS — patrón recomendado (aplicar en HtmlRowPrepared con CssClass) */ .an-row-neutral td, tr.an-row-neutral td { background-color: var(--an-surface-hover) !important; border-left: 3px solid var(--an-border-strong) !important; } .an-row-neutral td:first-child, tr.an-row-neutral td:first-child { padding-left: 9px !important; } .an-row-info td, tr.an-row-info td { background-color: var(--an-primary-50) !important; border-left: 3px solid var(--an-primary-600) !important; } .an-row-info td:first-child, tr.an-row-info td:first-child { padding-left: 9px !important; } .an-row-rojo td, tr.an-row-rojo td { background-color: var(--an-sem-rojo-bg) !important; border-left: 3px solid var(--an-sem-rojo-bar) !important; } .an-row-rojo td:first-child, tr.an-row-rojo td:first-child { padding-left: 9px !important; } .an-row-amarillo td, tr.an-row-amarillo td { background-color: var(--an-sem-amar-bg) !important; border-left: 3px solid var(--an-sem-amar-bar) !important; } .an-row-amarillo td:first-child, tr.an-row-amarillo td:first-child { padding-left: 9px !important; } .an-row-verde td, tr.an-row-verde td { background-color: var(--an-sem-verde-bg) !important; border-left: 3px solid var(--an-sem-verde-bar) !important; } .an-row-verde td:first-child, tr.an-row-verde td:first-child { padding-left: 9px !important; } /* Semáforo v2 — coloración de celda individual (HtmlDataCellPrepared) */ td.an-cell-rojo { background-color: var(--an-sem-rojo-bg) !important; color: var(--an-sem-rojo-bar) !important; font-weight: 600 !important; } td.an-cell-amarillo { background-color: var(--an-sem-amar-bg) !important; color: var(--an-sem-amar-bar) !important; font-weight: 600 !important; } td.an-cell-verde { background-color: var(--an-sem-verde-bg) !important; color: var(--an-sem-verde-bar) !important; font-weight: 600 !important; } td.an-cell-info { background-color: var(--an-primary-50) !important; color: var(--an-primary-700) !important; font-weight: 600 !important; } /* Celda de datos destacados (sin estado semáforo) */ td.an-cell-legacy { background-color: var(--an-legacy-bg) !important; color: var(--an-legacy-fg) !important; } /* Celda editable en batch-edit (NuevaCantidad, NuevoValor) */ td.an-cell-editable { background-color: var(--an-surface-hover) !important; color: var(--an-primary-700) !important; font-weight: 500 !important; } /* ── 17.14 Ajuste de page body en modo embedded ── */ /* Quitar margin-top del body cuando el encabezado legacy está oculto */ body.bridge-embedded { padding-top: 0 !important; margin-top: 0 !important; background: var(--an-surface-body) !important; } body.bridge-embedded .navbar, body.bridge-embedded #navbarLegacy { display: none !important; } /* ══════════════════════════════════════════════════════════════ 18. MODALES BOOTSTRAP — Estilo uniforme v2 ══════════════════════════════════════════════════════════════ */ /* Header — título con borde inferior */ .modal-header { border-bottom: 1px solid var(--an-border-default) !important; padding: 14px 20px !important; } .modal-header .close { color: var(--an-text-secondary) !important; opacity: 0.6 !important; } .modal-header .close:hover { opacity: 1 !important; } /* Body */ .modal-body { padding: 20px !important; font-size: 14px !important; color: var(--an-text-primary) !important; } .modal-body h5 { font-size: 14px !important; font-weight: 400 !important; color: var(--an-text-primary) !important; line-height: 1.6 !important; margin: 0 !important; } /* Footer */ .modal-footer { border-top: 1px solid var(--an-border-default) !important; padding: 12px 20px !important; } /* ── 18.1 Modales con ASPxMenu Sí/No (popUpConfirmar, popUpConfirmarAnularCP, etc.) El ASPxMenu renderiza ítems como
que contiene un item */ #MenuPrincipal > table > tbody > tr > td, .dxm-control > table > tbody > tr > td { padding: 0 !important; border: none !important; flex-shrink: 0 !important; } /* Último td → spacer para empujar búsqueda a la derecha */ #MenuPrincipal > table > tbody > tr > td:last-child, .dxm-control > table > tbody > tr > td:last-child { flex: 1 1 auto !important; } /* ── 17.3 Items del menú: ícono arriba + label debajo, compactos ── */ /* DevExpress renderiza cada item como con + dentro */ .dxm-content { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; min-width: 64px !important; max-width: 88px !important; height: 64px !important; padding: 6px 8px !important; border: 1px solid transparent !important; border-radius: var(--an-radius-md) !important; cursor: pointer !important; text-decoration: none !important; transition: background var(--an-transition), border-color var(--an-transition) !important; background: transparent !important; } .dxm-content:hover, .dxm-hovered .dxm-content { background: var(--an-surface-hover) !important; border-color: var(--an-border-default) !important; text-decoration: none !important; } .dxm-content:active { background: var(--an-surface-active) !important; } /* Ícono del item — PNG 40x40 */ .dxm-image, .dxm-content img { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; display: block !important; margin: 0 auto !important; opacity: 1 !important; transition: transform 120ms ease !important; flex-shrink: 0 !important; object-fit: contain !important; } .dxm-hovered .dxm-image, .dxm-content:hover .dxm-image, .dxm-content:hover img { transform: translateY(-1px) !important; } /* Label del item */ .dxm-contentText { display: block !important; font-family: var(--an-font) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.15 !important; color: var(--an-text-primary) !important; text-align: center !important; white-space: nowrap !important; letter-spacing: 0 !important; } /* Ítem deshabilitado */ .dxm-disabled .dxm-content, .dxm-disabled .dxm-contentText { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none !important; } /* Ocultar la flecha de submenú */ .dxm-popout, .dxm-arrow { display: none !important; } /* ── 17.4 Separador vertical entre grupos de botones ── */ .an-toolbar-sep { width: 1px !important; height: 24px !important; background: var(--an-border-default) !important; margin: 0 4px !important; flex-shrink: 0 !important; display: inline-block !important; align-self: center !important; } /* ── 17.5 Búsqueda inline en la toolbar (si la página la agrega) ── */ /* El ASPxMenu no tiene búsqueda nativa. Si el módulo agrega un dxeTextBox dentro del menú o en el cphMenu, usar: */ .dxm-control .dxeTextBox_MulberryAngelNet, .dxm-control .dxeTextBoxSys, .an-toolbar-search { margin-left: auto !important; width: 180px !important; align-self: center !important; } .dxm-control .dxeTextBox_MulberryAngelNet input, .dxm-control .dxeTextBoxSys input, .an-toolbar-search input { height: 30px !important; font-size: 12px !important; padding: 4px 10px 4px 30px !important; border-radius: var(--an-radius-full) !important; border: 1px solid var(--an-border-default) !important; background: var(--an-surface-body) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 9px center !important; } .dxm-control .dxeTextBox_MulberryAngelNet input:focus, .an-toolbar-search input:focus { border-color: var(--an-primary-600) !important; box-shadow: var(--an-ring-focus) !important; background-color: #FFFFFF !important; width: 220px !important; transition: width 200ms ease, border-color 150ms ease !important; } /* ── 17.7 Grid más compacto en modo embedded ── */ /* Cabecera: reducir altura a 32px */ .dxgvHeader_MulberryAngelNet td, .dxgvHeader_MulberryAngelNet th { padding: 6px 12px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; color: var(--an-text-secondary) !important; background: var(--an-surface-body) !important; border-bottom: 1px solid var(--an-border-default) !important; white-space: nowrap !important; height: 32px !important; } /* Filas: altura reducida a 34px */ .dxgvDataRow_MulberryAngelNet td { padding: 5px 12px !important; height: 34px !important; font-size: 13px !important; border-bottom: 1px solid var(--an-border-light) !important; vertical-align: middle !important; } /* Fila seleccionada con indicador azul izquierdo */ .dxgvFocusedRow_MulberryAngelNet td, .dxgvFocusedRow_MulberryAngelNet { background-color: var(--an-primary-50) !important; border-left: 3px solid var(--an-primary-600) !important; } .dxgvFocusedRow_MulberryAngelNet td:first-child { padding-left: 9px !important; } /* Filtro de columnas compacto */ .dxgvFilterRow_MulberryAngelNet td { padding: 3px 8px !important; height: 28px !important; } .dxgvFilterRow_MulberryAngelNet input { height: 24px !important; font-size: 12px !important; padding: 2px 6px !important; } /* ── 17.8 Footer de paginador compacto ── */ .dxpLite_MulberryAngelNet { font-size: 12px !important; padding: 5px 12px !important; color: var(--an-text-secondary) !important; background: #FFFFFF !important; border-top: 1px solid var(--an-border-default) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .dxpLite_MulberryAngelNet .dxp-button, .dxpLite_MulberryAngelNet a { color: var(--an-primary-600) !important; padding: 2px 6px !important; border-radius: 4px !important; text-decoration: none !important; transition: background 120ms ease !important; } .dxpLite_MulberryAngelNet .dxp-button:hover, .dxpLite_MulberryAngelNet a:hover { background: var(--an-primary-50) !important; } .dxpLite_MulberryAngelNet .dxp-current { background: var(--an-primary-600) !important; color: #FFFFFF !important; border-radius: 4px !important; padding: 2px 8px !important; } /* ── 17.9 "Create Filter" link al fondo del grid ── */ a[id*="CreateFilter"], .dxgvPreview_MulberryAngelNet a { font-size: 11px !important; color: var(--an-primary-600) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px 8px !important; } /* ── 17.10 Zona de contenido del módulo (body del iframe) ── */ /* Añadir padding para que el contenido no pegue al borde */ .an-module-body, form > .container-fluid, form > .row:first-of-type { padding: 8px 12px !important; } /* ── 17.11 Encabezado de sección del módulo (h1/h2 del form) ── */ /* Reemplaza el

o
con estilo moderno */ .titulosEstilo, .titulosNotficaciones, h3.section-header, .form-module-title { font-size: 15px !important; font-weight: 700 !important; color: var(--an-text-primary) !important; margin: 0 0 4px 0 !important; padding: 0 !important; border: none !important; line-height: 1.3 !important; } /* Subtexto tipo "8 registros · última sync hace 5 min" */ .an-module-sub { font-size: 12px !important; color: var(--an-text-tertiary) !important; font-weight: 400 !important; margin-bottom: 10px !important; } /* ── 17.12 Botón "Más" (ellipsis) en el extremo derecho ── */ .an-btn-more, [id*="btnMas"] .dxbButton_MulberryAngelNet, [id*="BtnMas"] .dxbButton_MulberryAngelNet { min-width: 36px !important; max-width: 36px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: transparent !important; border: 1px solid transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: var(--an-text-secondary) !important; font-size: 18px !important; letter-spacing: 1px !important; cursor: pointer !important; transition: var(--an-transition) !important; } .an-btn-more:hover, [id*="btnMas"] .dxbButton_MulberryAngelNet:hover { background: var(--an-surface-hover) !important; border-color: var(--an-border-default) !important; } /* ── 17.13 Botones Guardar / Cancelar del popup Edit Form (asdatiGrid) ── */ /* Los botones UpdateButton y CancelButton usan btnGuardar.png / btnCancelar.png Los renderiza DevExpress dentro del popup de edición — clases dxgvCEB* */ .dxgvCEB_MulberryAngelNet img, .dxgvCEB img, td.dxgvCEB img, td.dxgvCEB_MulberryAngelNet img { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; display: inline-block !important; vertical-align: middle !important; object-fit: contain !important; opacity: 1 !important; } /* ── 17.13b Semáforo v2 — filas del datagrid ──────────────────────────────── DevExpress aplica BackColor del VB como style inline en la

con + imagen. Los hacemos aparecer como botones full-width en dos columnas. ── */ /* Contenedor del menú dentro del modal — forzar flex de dos columnas */ .modal .dx-menu-container .dxm-control, .modal-body .dx-menu-container .dxm-control, .modal-footer .dx-menu-container .dxm-control { background: transparent !important; border: none !important; box-shadow: none !important; min-height: unset !important; padding: 0 !important; } .modal .dx-menu-container .dxm-control > table, .modal-body .dx-menu-container .dxm-control > table, .modal-footer .dx-menu-container .dxm-control > table { width: 100% !important; } .modal .dx-menu-container .dxm-control > table > tbody > tr { display: flex !important; gap: 8px !important; } .modal .dx-menu-container .dxm-control > table > tbody > tr > td { flex: 1 !important; padding: 0 !important; } /* Cada ítem → botón de altura cómoda */ .modal .dx-menu-container .dxm-content { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 42px !important; min-width: unset !important; max-width: unset !important; padding: 0 16px !important; border-radius: var(--an-radius-md) !important; font-size: 14px !important; font-weight: 500 !important; } /* Ocultar la imagen del botón (btnSi.png / btnNo.png) dentro del modal */ .modal .dx-menu-container .dxm-image, .modal .dx-menu-container .dxm-content img { display: none !important; } /* Label del ítem — visible y legible */ .modal .dx-menu-container .dxm-contentText { display: block !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important; } /* Colorear por nombre de ítem: btnSi → azul brand, btnNo → rojo destructivo */ .modal .dx-menu-container [data-dx_id*="btnSi"] .dxm-content, .modal .dx-menu-container .dxm-item:first-child .dxm-content { background-color: var(--an-primary-600) !important; border: 1px solid var(--an-primary-600) !important; color: var(--an-text-on-primary) !important; } .modal .dx-menu-container [data-dx_id*="btnSi"] .dxm-content:hover, .modal .dx-menu-container .dxm-item:first-child .dxm-content:hover { background-color: var(--an-primary-700) !important; border-color: var(--an-primary-700) !important; } .modal .dx-menu-container [data-dx_id*="btnNo"] .dxm-content, .modal .dx-menu-container .dxm-item:last-child .dxm-content { background-color: var(--an-surface-card) !important; border: 1px solid var(--an-border-default) !important; color: var(--an-text-primary) !important; } .modal .dx-menu-container [data-dx_id*="btnNo"] .dxm-content:hover, .modal .dx-menu-container .dxm-item:last-child .dxm-content:hover { background-color: var(--an-surface-hover) !important; border-color: var(--an-border-strong) !important; }