contenedor de un formulario de captura para que sus campos Telerik (textbox, numeric, combobox, dropdownlist, datepicker) queden a 12px, igual que los grids custom-grid. Pensado SOLO para pantallas de captura densas, no para dashboards/diálogos/navegación. Reutilizable y reversible. */ .wl-form-compact .k-input, .wl-form-compact .k-picker, .wl-form-compact .k-input-inner, .wl-form-compact .k-input-value-text, .wl-form-compact .form-label { font-size: 12px; } /* ==================== MENU LAYOUTS ==================== */ [class*="menu-"] { border-radius: var(--kendo-border-radius-lg); margin-bottom: 16px; } [class*="menu-"] .k-svg-icon { margin-right: 8px; opacity: 0.85; } [class*="menu-"] .k-menu-popup .k-separator { margin: 4px 8px; border-color: var(--kendo-color-border); } [class*="menu-"] .k-menu-popup .k-menu-item .k-menu-popup { min-width: 240px; } /* Menu popup items: reducir padding para layout más compacto */ .k-menu-popup .k-menu-link { padding: 6px 12px; } .k-menu-popup .k-menu-item { margin: 0; } .wl-menu-category { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; } @media (max-width: 560px) { [class*="menu-"] { flex-direction: column; } [class*="menu-"] > .k-menu-item { width: 100%; } } /* ==================== NOTIFICATIONS ==================== */ .k-notification-container { z-index: 9999; margin-top: 60px; } /* ==================== NAVIGATION ==================== */ .nav-link { background-color: var(--kendo-color-surface); color: var(--kendo-color-on-app-surface); } .nav-link.collapsed { background-color: var(--kendo-color-surface); color: var(--kendo-color-on-app-surface); } .nav-link:not(.collapsed) { background-color: var(--kendo-color-surface); } .nav-link:hover, .nav-link:focus, .nav-link:active { background-color: var(--kendo-color-base); color: var(--kendo-color-on-app-surface); } .collapse .nav-link { background-color: transparent; padding-left: 20px; } .nav-header { background-color: var(--kendo-color-base-subtle); color: var(--kendo-color-on-app-surface); padding: 10px; border-radius: var(--kendo-border-radius-md); text-align: left; margin-bottom: 5px; font-weight: normal; font-size: 14px; } /* ==================== ANIMATIONS ==================== */ /* Keyframes */ @keyframes wl-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wl-fade-in-scale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes wl-slide-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Modales y Diálogos — fade + scale sutil */ .k-window { animation: wl-fade-in-scale 0.2s ease-out; } .k-dialog-wrapper .k-dialog { animation: wl-fade-in-scale 0.2s ease-out; } .k-overlay { animation: wl-fade-in 0.15s ease-out; } /* Drawer items — transición suave */ .k-drawer-item { transition: background 0.15s ease, padding-left 0.2s ease, opacity 0.2s ease; } /* Cards — transición suave (sin transform para no romper popups de Telerik) */ .k-card { transition: box-shadow 0.2s ease; } /* Hover lift SOLO en cards que son enlaces/navegación (ej: PresupuestoInicio). NO aplicar a todos los k-card porque el transform: translateY() mueve el trigger de DatePicker/DropDownList y Telerik cierra el popup. */ .k-card.wl-card-link:hover { transform: translateY(-2px); box-shadow: var(--wl-shadow-lg); } /* Grid rows — transición suave en hover */ .custom-grid .k-table-row { transition: background-color 0.15s ease; } /* Menú popups — fade in */ .k-menu-popup { animation: wl-fade-in 0.15s ease-out; } /* Botones — scale al click */ .k-button { transition: transform 0.1s ease, background-color 0.2s ease; } .k-button:active { transform: scale(0.97); } /* Notificaciones — slide in desde la derecha */ .k-notification { animation: wl-slide-in-right 0.3s ease-out; } /* ==================== TILES DASHBOARD ==================== */ .wl-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 24px; } button.wl-tile.k-button, .wl-tile.k-button { background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg); padding: 20px 16px; cursor: pointer; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 120px; white-space: normal; line-height: normal; } button.wl-tile.k-button:hover, .wl-tile.k-button:hover { transform: translateY(-3px); box-shadow: var(--wl-shadow-lg); border-color: var(--kendo-color-primary); background: var(--kendo-color-surface-alt); } .wl-tile-icon { color: var(--kendo-color-primary); margin-bottom: 10px; } .wl-tile-title { color: var(--kendo-color-on-app-surface); font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; } .wl-tile-desc { color: var(--kendo-color-subtle); font-size: 0.78rem; line-height: 1.3; } .wl-tiles-section { color: var(--kendo-color-on-app-surface); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--kendo-color-border); display: flex; align-items: center; gap: 8px; } .wl-tiles-section .k-svg-icon { color: var(--kendo-color-primary); opacity: 0.85; } /* ==================== DESIGN SYSTEM — KPI & DASHBOARD ==================== */ .wl-kpi-value { font-size: var(--wl-kpi-font-size, 2.5rem); font-weight: 700; line-height: 1.2; } .wl-kpi-value-sm { font-size: var(--wl-kpi-font-size-sm, 1.8rem); font-weight: 700; line-height: 1.2; } /* Monto largo en tarjeta angosta: achica con el ancho y parte antes de salirse. Medido en /nomina/asiento-generico: «2.683.245,90» a 1.8rem no cabe en una tarjeta de un cuarto de pantalla y se montaba encima del KPI de al lado. */ .wl-kpi-value-fluid { font-size: clamp(1rem, 1.35vw + 0.35rem, var(--wl-kpi-font-size-sm, 1.8rem)); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .wl-min-w-180 { min-width: 180px; } .wl-min-w-200 { min-width: 200px; } .wl-min-w-350 { min-width: 350px; } .wl-min-w-400 { min-width: 400px; } .wl-max-w-700 { max-width: 700px; } .wl-max-w-1100 { max-width: 1100px; } .wl-max-w-1400 { max-width: 1400px; } .wl-max-w-450 { max-width: 450px; } /* ==================== DESIGN SYSTEM — INFO BOX ==================== */ .wl-info-box { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--kendo-color-primary-subtle); border-radius: var(--kendo-border-radius-lg); border-left: 4px solid var(--kendo-color-primary); } .wl-info-box-label { font-size: 0.8rem; color: var(--kendo-color-primary); text-transform: uppercase; letter-spacing: 0.5px; } .wl-info-box-value { font-size: 1.1rem; font-weight: 700; color: var(--kendo-color-primary-on-subtle); } /* ==================== DESIGN SYSTEM — FORMS ==================== */ .wl-display-field { background: transparent; border-color: var(--kendo-color-border); } .wl-display-field-text { padding: 4px 8px; font-size: 0.85rem; color: var(--kendo-color-subtle); } /* ==================== DESIGN SYSTEM — BANNERS ==================== */ .wl-banner-warning { background: var(--kendo-color-warning-subtle); border: 1px solid var(--kendo-color-warning-emphasis); border-radius: var(--kendo-border-radius-md); padding: 6px 12px; margin-bottom: 8px; font-size: 0.8rem; color: var(--kendo-color-warning-on-subtle); } .wl-banner-info { background: var(--kendo-color-base-subtle); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-md); padding: 6px 12px; margin-bottom: 8px; font-size: 0.8rem; color: var(--kendo-color-subtle); } /* ==================== DESIGN SYSTEM — SCROLL CONTAINER ==================== */ .wl-scroll-container { max-height: 250px; overflow-y: auto; border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-sm); padding: 6px; } .wl-scroll-panel { height: 100%; overflow: auto; overflow-x: hidden; max-width: 100%; } .wl-combo-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* ==================== DESIGN SYSTEM — STICKY HEADER ==================== */ .wl-sticky-header { position: sticky; top: 0; z-index: 10; padding: 10px 0; border-bottom: 1px solid var(--kendo-color-border); } /* Mesa de trabajo de la Conciliacion Manual: pegada al pie del contenido, para que lo marcado y los botones no se vayan de la vista al recorrer las dos listas. El z-index queda por debajo de .wl-sticky-header a proposito. */ /* Las dos listas de la Conciliacion Manual, una al lado de la otra. Delimitar: en el tema CLARO --kendo-color-surface-alt es blanco igual que --kendo-color-surface (medido: 255,255,255 los dos), asi que tintar con surface-alt no separa nada. El tono que SI contrasta en los dos temas es el fondo de la app puesto DENTRO de la superficie de la card: son las dos bases de la paleta, y la distancia entre ellas existe por construccion. El .k-card-header del proyecto no sirve aqui: es navy solido, pensado para el titulo de la pantalla, y dos barras navy competirian con el. */ .wl-panel-lista { background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg); overflow: hidden; /* Los dos paneles a la misma altura: el aviso de orden por parecido existe en UN solo lado, asi que sin esto los bordes inferiores quedan desparejos y parece que una lista tiene mas contenido que la otra. */ height: 100%; } .wl-panel-lista .k-grid { border: 0; } .wl-panel-cabecera { background: var(--kendo-color-app-surface); border-bottom: 1px solid var(--kendo-color-border); padding: 8px 12px; } /* Los dos lados de la conciliacion son listas identicas en forma, asi que el unico que los distingue es el titulo. Se les da un acento propio: una barra arriba y un lavado del mismo color en la cabecera. primary y tertiary son los dos acentos de marca y NINGUNO significa un estado (a diferencia de success/warning/error), asi que no confunden. El color va SIEMPRE acompanado del rotulo: nunca es el unico canal, y por eso el texto conserva su color normal (tertiary es dorado en el tema claro y sobre fondo claro no llegaria al contraste minimo para texto). */ .wl-panel-libro { border-top: 3px solid var(--kendo-color-primary); } .wl-panel-libro .wl-panel-cabecera { background: color-mix(in srgb, var(--kendo-color-primary) 8%, var(--kendo-color-app-surface)); } .wl-panel-banco { border-top: 3px solid var(--kendo-color-tertiary); } .wl-panel-banco .wl-panel-cabecera { background: color-mix(in srgb, var(--kendo-color-tertiary) 12%, var(--kendo-color-app-surface)); } /* La misma clave de color en las fichas de la mesa: de un vistazo se ve de que lado viene cada linea del grupo. */ /* El borde completo va aqui, NO con la utilidad .border de Bootstrap: esa lleva !important y le gana a un border-left propio por mucha especificidad que se le apile (medido: el acento salia gris 222,226,230). */ .wl-ficha-libro, .wl-ficha-banco { border: 1px solid var(--kendo-color-border); } .wl-ficha-libro { border-left: 3px solid var(--kendo-color-primary); } .wl-ficha-banco { border-left: 3px solid var(--kendo-color-tertiary); } /* Mas denso que el grid normal (13px): con seis columnas en media pantalla, cada pixel de ancho cuenta. */ .wl-grid-compacto, .wl-grid-compacto .k-grid-header th, .wl-grid-compacto .k-grid-content td { font-size: 11px; } .wl-grid-compacto .k-grid-header th, .wl-grid-compacto .k-grid-content td { padding-block: 3px; padding-inline: 6px; } /* Una fila = una linea. Sin esto la descripcion se parte en tres o cuatro lineas al angostarse la columna y la fila se hace mas alta que antes del rediseno: se perdia justo lo que se queria ganar. El texto completo sigue disponible en el title de la celda y en la ficha de la mesa. */ .wl-grid-compacto .k-grid-content td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-mesa-trabajo { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.14); } /* ==================== DESIGN SYSTEM — BADGES ==================== */ .wl-badge { padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; } .wl-badge-success { background-color: var(--kendo-color-success); color: var(--kendo-color-on-success); } .wl-badge-warning { background-color: var(--kendo-color-warning); color: var(--kendo-color-on-warning); } .wl-badge-error { background-color: var(--kendo-color-error); color: var(--kendo-color-on-error); } .wl-badge-muted { background-color: var(--kendo-color-base-subtle); color: var(--kendo-color-subtle); } .wl-badge-info-soft { background-color: var(--kendo-color-info-subtle); color: var(--kendo-color-info); } .wl-badge-primary-soft { background-color: var(--kendo-color-primary-subtle); color: var(--kendo-color-primary); } .wl-badge-subtle { background: var(--kendo-color-base-subtle); color: var(--kendo-color-on-subtle); padding: 1px 6px; border-radius: 8px; font-size: 0.65rem; margin-left: 4px; } /* ==================== DESIGN SYSTEM — VALIDATION ==================== */ .wl-validation-msg { font-size: 0.8rem; margin-top: 4px; } .wl-highlight-empty { background-color: var(--kendo-color-warning-subtle) !important; border-color: var(--kendo-color-warning-emphasis) !important; } /* ==================== DESIGN SYSTEM — INLINE FORM ==================== */ .wl-form-inline { border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg); padding: 1rem; margin-top: 1rem; background-color: var(--kendo-color-surface-alt); } .wl-form-inline label { font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 4px; color: inherit; } .wl-form-inline h6 { font-weight: 700; color: inherit; } .wl-form-inline .campo-grupo { margin-bottom: 1rem; } .wl-form-inline hr { opacity: 0.3; } .wl-form-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kendo-color-subtle); border-bottom: 1px solid var(--kendo-color-border); padding-bottom: 4px; margin-bottom: 0.75rem; margin-top: 0.25rem; } /* ---- Tasa de cambio en la línea del comprobante ---- El menú que trae las tasas del BCV cuelga del campo Tasa de Cambio, así que su contenedor ancla el posicionamiento. Los tokens son los del tema: el menú tiene que leerse igual en claro y en oscuro. */ /* 🔴 «Monto Moneda Extranjera (USD)» no cabe en una línea y su etiqueta se partía en dos, empujando SU casilla un renglón por debajo de las otras tres. Reservando dos líneas para todas las etiquetas de la fila, las cuatro casillas arrancan a la misma altura sin depender de cuánto mida cada texto — que además cambia al traducir al inglés y con la moneda que se elija. */ .wl-form-inline .wl-montos-fila .campo-grupo > label { /* Dos líneas reservadas: la etiqueta corta deja el hueco debajo y su casilla arranca a la misma altura que la de la etiqueta que sí se parte. 🔴 Sin `display: flex` a propósito. Con flex, «(USD)» pasa a ser un item aparte que salta de línea por su cuenta y la etiqueta se iba a 65 px —cuatro renglones— en vez de dos. Medido en el navegador. Como texto normal, «Monto Moneda Extranjera (USD)» fluye y se parte donde toca. */ /* line-height explícito para que DOS renglones midan exactamente el min-height: así la etiqueta de una línea y la de dos ocupan lo mismo y las casillas arrancan iguales. */ line-height: 1.3; min-height: 2.6em; margin-bottom: 4px; } .wl-tasa-campo { position: relative; } .wl-tasa-fila { display: flex; gap: 6px; align-items: stretch; /* 🔴 Cuando la columna se estrecha, el botón se baja debajo del campo en vez de salirse y quedar cortado encima de la casilla de al lado (visto a 1150 px con el panel de comprobantes abierto: se leía «$ Tr»). Va debajo del campo, así que la casilla no se mueve y la fila de montos sigue alineada. */ flex-wrap: wrap; } /* 🔴 El input necesita un piso: con solo `flex: 1` el botón de al lado le ganaba el ancho y la tasa quedaba en 40 px —seis decimales en una casilla donde no cabe ni uno—. Medido en el navegador, no deducido del CSS. */ .wl-tasa-fila .k-numerictextbox { flex: 1 1 auto; min-width: 7.5rem; } /* Y el botón no crece: lo que sobre es para el número. */ .wl-tasa-fila .k-button { flex: 0 0 auto; white-space: nowrap; } .wl-menu-tasas { position: absolute; z-index: 30; top: 100%; right: 0; margin-top: 4px; min-width: 20rem; max-height: 22rem; overflow-y: auto; padding-bottom: 4px; background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-md); box-shadow: var(--wl-shadow-lg); } .wl-menu-tasas-grupo { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px 4px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kendo-color-subtle); } .wl-menu-tasas-tabla { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.75; } .wl-menu-tasas-sep { height: 1px; background: var(--kendo-color-border); margin: 4px 0; } .wl-menu-tasas-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; } /* El chip de moneda. 🔴 El botón NO puede llevar FillMode="Flat": Kendo protege el flat con «background: none !important; border-color: transparent !important», y contra un !important no gana la especificidad. El color sí se aplicaba y el fondo no, así que el chip activo quedaba con texto blanco sobre transparente — en tema claro, la moneda seleccionada era invisible. Con el fillMode por defecto (solid) estas reglas mandan. */ .wl-form-inline .k-button.wl-chip-moneda { min-width: 3rem; padding: 2px 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-sm); background: var(--kendo-color-surface); color: var(--kendo-color-subtle); } .wl-form-inline .k-button.wl-chip-moneda:hover { border-color: var(--kendo-color-primary); color: var(--kendo-color-on-app-surface); } .wl-form-inline .k-button.wl-chip-moneda.on, .wl-form-inline .k-button.wl-chip-moneda.on:hover { background: var(--kendo-color-primary); border-color: var(--kendo-color-primary); color: var(--kendo-color-on-primary); } /* Una opción del menú: fecha a la izquierda, tasa a la derecha. La cifra se ve ANTES de elegir — en el sistema anterior había que escoger a ciegas y deshacer si no era. */ .wl-form-inline .k-button.wl-opcion-tasa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 5px 12px; border: 0; border-radius: 0; text-align: left; font-weight: 400; /* El aspecto plano lo da esto, NO FillMode="Flat": ese lleva !important y se llevaría por delante también el fondo del hover. */ background: transparent; color: var(--kendo-color-on-app-surface); } .wl-form-inline .k-button.wl-opcion-tasa:hover:not([disabled]) { background: var(--kendo-color-base-hover); } .wl-opcion-tasa-fecha { display: flex; flex-direction: column; line-height: 1.25; } .wl-opcion-tasa-tag { font-size: 0.68rem; color: var(--kendo-color-subtle); } .wl-opcion-tasa-valor { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 600; } .wl-form-inline .k-button.wl-opcion-tasa[disabled] .wl-opcion-tasa-valor { font-weight: 400; font-size: 0.78rem; } /* Qué campo se acaba de calcular solo, debajo de él. */ .wl-calculado { font-size: 0.72rem; color: var(--kendo-color-success); margin-top: 2px; } /* La moneda de la línea, debajo del campo. Mismo sitio y tamaño que el aviso de «calculado», para que los dos renglones de ayuda se lean como uno solo. */ .wl-moneda-activa { font-size: 0.72rem; font-weight: 600; color: var(--kendo-color-primary); margin-top: 2px; white-space: nowrap; } .wl-stock-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; } .wl-stock-badge.ok { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success); } .wl-stock-badge.bajo { background: var(--kendo-color-warning-subtle); color: var(--kendo-color-warning); } /* ==================== DESIGN SYSTEM — INVENTORY PANELS ==================== */ .wl-filter-bar { border-bottom: 1px solid var(--kendo-color-border); background: var(--kendo-color-surface-alt); } .wl-header-card { background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg); padding: 12px 16px; } .wl-totals-box { display: flex; gap: 16px; align-items: center; font-size: 0.85rem; } .wl-totals-box .label { color: var(--kendo-color-subtle); } .wl-totals-box .value { font-weight: 700; font-size: 0.95rem; } .wl-badge-info { background-color: var(--kendo-color-info); color: var(--kendo-color-on-info); padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .wl-doc-card.k-button { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: var(--kendo-border-radius-md); cursor: pointer; border: 1px solid transparent; transition: all 0.15s; margin-bottom: 4px; background: transparent; color: inherit; font: inherit; height: auto; white-space: normal; } .wl-doc-card.k-button:hover { background: var(--kendo-color-base-subtle-hover); border-color: var(--kendo-color-border); } .wl-doc-card.k-button.selected { background: var(--kendo-color-primary-subtle); border-color: var(--kendo-color-primary); } .wl-panel-left { overflow-y: auto; padding: 8px; height: 100%; } .wl-panel-right { padding: 12px; overflow-y: auto; height: 100%; } .wl-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--kendo-color-subtle); font-size: 0.9rem; } .wl-empty-state .icon { font-size: 3rem; margin-bottom: 8px; opacity: 0.3; } .wl-transfer-badge { background: var(--kendo-color-success-subtle); border: 1px solid var(--kendo-color-success-emphasis); border-radius: var(--kendo-border-radius-md); padding: 4px 10px; font-size: 0.75rem; color: var(--kendo-color-success); display: inline-flex; align-items: center; gap: 4px; } /* ==================== DRAWER LAYOUT ==================== */ .ai-usage-drawer .k-drawer { flex: none !important; position: sticky !important; top: 45.5px; height: calc(100vh - 45.5px); } .ai-usage-drawer.k-drawer-expanded .k-drawer { padding: var(--kendo-spacing-4, 1rem); } .k-drawer-item.k-level-0 { font-weight: 700; text-transform: uppercase; font-size: var(--kendo-font-size-xs); letter-spacing: 0.05em; color: var(--kendo-color-subtle); padding: 10px 12px; margin-top: 8px; } .k-drawer-item.k-level-1 { padding-left: 16px; font-size: var(--kendo-font-size-sm); border-radius: var(--kendo-border-radius-md); transition: background 0.15s ease, border-color 0.15s ease; border-left: 3px solid transparent; } .k-drawer-item.k-level-2 { padding-left: 40px; font-size: var(--kendo-font-size-xs); border-radius: var(--kendo-border-radius-md); transition: background 0.15s ease; color: var(--kendo-color-subtle); } /* Asegurar que el texto del drawer use el ancho disponible y no se trunque prematuramente. Telerik por defecto aplica ellipsis muy temprano. */ .ai-usage-drawer .k-item-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .k-drawer-item.k-level-1:hover, .k-drawer-item.k-level-2:hover { background: var(--kendo-color-base-subtle); } .k-drawer-item.k-selected.k-level-1 { background: var(--kendo-color-primary-subtle); border-left-color: var(--kendo-color-primary); color: var(--kendo-color-primary-on-subtle); } .k-drawer-item.k-selected.k-level-2 { background: var(--kendo-color-primary-subtle); color: var(--kendo-color-primary-on-subtle); position: relative; } /* Punto indicador en level-2 seleccionado (dark theme) */ .k-drawer-item.k-selected.k-level-2::before { content: ""; position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--kendo-color-primary); } /* Padre resaltado cuando un hijo está activo (dark theme) */ .k-drawer-item.k-parent-active.k-level-1 { background: var(--kendo-color-base-subtle); border-left-color: var(--kendo-color-primary); color: var(--kendo-color-on-app-surface); } .k-drawer-item.k-parent-active.k-level-1 .k-svg-icon { color: var(--kendo-color-primary); opacity: 1; } .k-drawer-item .k-svg-icon { margin-right: 8px; opacity: 0.7; } .k-drawer-item.k-selected .k-svg-icon { opacity: 1; color: var(--kendo-color-primary); } .empresa-appbar { display: flex; align-items: center; gap: 8px; padding: 4px 16px; border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg); background: var(--wl-bg-glass); } .empresa-appbar .k-svg-icon { opacity: 0.7; } .empresa-nombre { font-weight: 600; font-size: 0.9rem; color: var(--kendo-color-on-app-surface); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empresa-rif { font-size: 0.8rem; color: var(--kendo-color-subtle); padding-left: 8px; border-left: 1px solid var(--kendo-color-border); } .empresa-codigo { font-size: 0.8rem; color: var(--kendo-color-subtle); padding-right: 8px; border-right: 1px solid var(--kendo-color-border); } .appbar-flex-equal { flex: 1 0 0% !important; } @media (max-width: 768px) { .empresa-rif { display: none; } .empresa-nombre { max-width: 150px; font-size: 0.8rem; } } /* ==================== GRID EXTENSIONS ==================== */ .wl-grid-compact .k-table-td, .wl-grid-compact .k-table-th { padding: 2px 6px !important; font-size: 0.78rem !important; line-height: 1.2 !important; } .wl-grid-wrap-header th.k-header .k-column-title { white-space: normal; vertical-align: middle; } .wl-row-anulada { background-color: var(--kendo-color-error-subtle) !important; color: var(--kendo-color-error); opacity: 0.75; } .wl-row-empty td { background-color: rgba(255, 200, 200, 0.12) !important; } .wl-row-partial td { background-color: rgba(255, 235, 180, 0.15) !important; } .wl-row-dirty td { background-color: rgba(180, 220, 255, 0.2) !important; } /* Filas con estado semantico (OnRowRender de los reportes: caducidad, antiguedad, saldos negativos). Van por token, asi sirven en dark y light sin duplicar. El !important es necesario: las filas alternas del grid traen su propio fondo. Ojo: el fondo se pinta en los , no en el — Telerik le da fondo a la celda. */ .wl-row-error td { background-color: var(--kendo-color-error-subtle) !important; } .wl-row-warning td { background-color: var(--kendo-color-warning-subtle) !important; } .wl-row-success td { background-color: var(--kendo-color-success-subtle) !important; } /* Barra de proporcion dentro de una celda numerica: compara magnitudes de un vistazo sin leer digitos (quien concentra el stock, que articulo pesa en el consumo). El ancho de .wl-bar es dato, no diseño — va inline y lo calcula la pagina como porcentaje del mayor valor de esa columna. Uso: 410,00 */ .wl-bar-cell { position: relative; display: block; } .wl-bar-cell > .wl-bar { position: absolute; top: 2px; bottom: 2px; right: 0; background: var(--kendo-color-primary-subtle); border-radius: 3px; } /* El numero va por encima de la barra, nunca detras */ .wl-bar-cell > .wl-bar-val { position: relative; } /* ==================== DOCUMENT MANAGER ==================== */ .dm-storage-bar { background: var(--kendo-color-surface-alt); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-md); padding: 10px 14px; } .dm-storage-info { display: flex; justify-content: space-between; font-size: 12px; color: var(--kendo-color-subtle); margin-bottom: 6px; } .dm-progress-track { height: 8px; background: var(--kendo-color-base-subtle); border-radius: 4px; overflow: hidden; } .dm-progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; } .dm-bar-ok { background: var(--kendo-color-success); } .dm-bar-caution { background: var(--kendo-color-warning); } .dm-bar-warning { background: var(--kendo-color-warning-emphasis); } .dm-bar-full { background: var(--kendo-color-error); } .dm-storage-warning { font-size: 11px; color: var(--kendo-color-error); margin-top: 4px; font-weight: 600; } .dm-storage-caution { font-size: 11px; color: var(--kendo-color-warning); margin-top: 4px; } .dm-tags-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; } .dm-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; font-size: 12px; font-weight: 500; line-height: 1.4; } .dm-tag-auto { background: var(--kendo-color-info-subtle); color: var(--kendo-color-info); border: 1px solid var(--kendo-color-info-emphasis); } .dm-tag-manual { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success); border: 1px solid var(--kendo-color-success-emphasis); } .dm-tag-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; font-weight: bold; padding: 0 2px; line-height: 1; opacity: 0.7; } .dm-tag-remove:hover { opacity: 1; color: var(--kendo-color-error); } .dm-tags-legend { font-size: 11px; color: var(--kendo-color-subtle); border-top: 1px solid var(--kendo-color-border); padding-top: 8px; } /* ==================== AUTOGESTION ==================== */ .wl-card-info { color: var(--kendo-color-on-app-surface); background: var(--kendo-color-info-subtle); border: 1px solid var(--kendo-color-border); } /* ==================== MISC ==================== */ .bg-primary-custom { background-color: var(--kendo-color-primary-emphasis); } .text-white { color: var(--kendo-color-on-app-surface) !important; } .field-validation-error { color: var(--kendo-color-error); font-size: 0.85rem; margin-top: 4px; display: block; } /* ==================== LIGHT THEME OVERRIDES — LegalManager Style ==================== */ /* ---------- Cards ---------- */ html[data-theme="light"] .k-card { background: #FFFFFF; border: 1px solid #E2E8F0; box-shadow: var(--wl-shadow-sm); } html[data-theme="light"] .k-card:hover { box-shadow: var(--wl-shadow-md); border-color: #CBD5E0; } html[data-theme="light"] .k-card-header { background-color: var(--kendo-color-primary); color: #FFFFFF; border-bottom: none; } /* ---------- Grid headers: navy con gold accent ---------- */ html[data-theme="light"] .custom-grid .k-grid-header th { background-color: #1E3A5F; color: #FFFFFF; border-bottom: 2px solid var(--wl-accent-gold); font-weight: 600; } html[data-theme="light"] .custom-grid .k-grid-header th .k-column-title { color: #FFFFFF; } html[data-theme="light"] .custom-grid .k-filter-row th { background-color: #F7FAFC; border-bottom: 1px solid #E2E8F0; } /* Grid rows */ html[data-theme="light"] .custom-grid .k-table-row:hover { background-color: #EDF2F7; } html[data-theme="light"] .custom-grid .k-table-alt-row { background-color: #F7FAFC; } html[data-theme="light"] .custom-grid .k-pager { background: #FFFFFF; border-top: 1px solid #E2E8F0; } html[data-theme="light"] .custom-grid .k-toolbar { background: #FFFFFF; border-bottom: 1px solid #E2E8F0; } /* ---------- Tiles — LegalManager refinado ---------- */ html[data-theme="light"] button.wl-tile.k-button, html[data-theme="light"] .wl-tile.k-button { background: #FFFFFF; border: 1px solid #E2E8F0; box-shadow: var(--wl-shadow-sm); position: relative; overflow: hidden; } /* Línea dorada superior sutil (identidad LegalManager) */ html[data-theme="light"] button.wl-tile.k-button::before, html[data-theme="light"] .wl-tile.k-button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1E3A5F, #D4A853); opacity: 0; transition: opacity 0.25s ease; } html[data-theme="light"] button.wl-tile.k-button:hover, html[data-theme="light"] .wl-tile.k-button:hover { border-color: #1E3A5F; box-shadow: var(--wl-shadow-md); background: #FAFCFF; } html[data-theme="light"] button.wl-tile.k-button:hover::before, html[data-theme="light"] .wl-tile.k-button:hover::before { opacity: 1; } html[data-theme="light"] .wl-tile-icon { color: #1E3A5F; transition: color 0.2s ease, transform 0.2s ease; } html[data-theme="light"] button.wl-tile.k-button:hover .wl-tile-icon, html[data-theme="light"] .wl-tile.k-button:hover .wl-tile-icon { color: #D4A853; transform: scale(1.1); } html[data-theme="light"] .wl-tiles-section { border-bottom-color: #E2E8F0; color: #1E3A5F; } html[data-theme="light"] .wl-tiles-section .k-svg-icon { color: #D4A853; } /* ---------- Forms ---------- */ html[data-theme="light"] .wl-form-inline { background-color: #FFFFFF; border: 1px solid #E2E8F0; } /* Telerik inputs en light mode */ html[data-theme="light"] .k-input, html[data-theme="light"] .k-picker { border-color: #E2E8F0; background: #FFFFFF; } html[data-theme="light"] .k-input:focus, html[data-theme="light"] .k-input.k-focus, html[data-theme="light"] .k-picker:focus, html[data-theme="light"] .k-picker.k-focus { border-color: #1E3A5F; box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15); } /* ---------- Empresa AppBar badge ---------- */ html[data-theme="light"] .empresa-appbar { background: rgba(30, 58, 95, 0.04); border-color: #E2E8F0; } html[data-theme="light"] .empresa-nombre { color: #1A202C; } html[data-theme="light"] .empresa-rif { color: #718096; border-left-color: #E2E8F0; } html[data-theme="light"] .empresa-codigo { color: #718096; border-right-color: #E2E8F0; } /* ---------- Info boxes & banners ---------- */ html[data-theme="light"] .wl-info-box { background: #EBF0F7; border-left-color: #1E3A5F; } html[data-theme="light"] .wl-info-box-label { color: #1E3A5F; } html[data-theme="light"] .wl-info-box-value { color: #1A202C; } /* ---------- Popups & dropdowns ---------- */ html[data-theme="light"] .k-popup { background: #FFFFFF; border: 1px solid #E2E8F0; box-shadow: var(--wl-shadow-lg); } html[data-theme="light"] .k-list-item:hover, html[data-theme="light"] .k-list-item.k-hover { background: #EDF2F7; } html[data-theme="light"] .k-list-item.k-selected { background: #1E3A5F; color: #FFFFFF; } /* ---------- Nav headers ---------- */ html[data-theme="light"] .nav-header { background-color: #EDF2F7; color: #1A202C; } /* ---------- Window/Dialog ---------- */ html[data-theme="light"] .k-window { border: 1px solid #E2E8F0; box-shadow: var(--wl-shadow-lg); } html[data-theme="light"] .k-window .k-window-titlebar { background: #1E3A5F; color: #FFFFFF; } /* ---------- Buttons refinados ---------- */ html[data-theme="light"] .custom-button { background-color: #1E3A5F; color: #FFFFFF; } html[data-theme="light"] .custom-button:hover { background-color: #16304F; } /* ---------- Scrollbar para sidebar navy ---------- */ html[data-theme="light"] .k-drawer::-webkit-scrollbar { width: 4px; } html[data-theme="light"] .k-drawer::-webkit-scrollbar-track { background: transparent; } html[data-theme="light"] .k-drawer::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; } html[data-theme="light"] .k-drawer::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /* Theme toggle icon */ .wl-theme-toggle { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--kendo-border-radius-full); border: 1px solid var(--kendo-color-border); background: var(--wl-bg-glass); transition: background 0.2s ease, transform 0.15s ease; color: inherit; } .wl-theme-toggle:hover { background: var(--kendo-color-base-subtle); transform: scale(1.05); } .wl-theme-toggle:active { transform: scale(0.95); } /* ==================== S31N29 REPORTES — LOOK ESPECTACULAR ==================== */ /* --- Container principal del reporte --- */ .rpt-container { background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg); box-shadow: var(--wl-shadow-sm); overflow: hidden; margin-bottom: 24px; } /* --- Cabecera del reporte con línea dorada superior --- */ .rpt-header { position: relative; padding: 20px 24px 16px; border-bottom: 1px solid var(--kendo-color-border); background: var(--kendo-color-surface-alt); } .rpt-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--kendo-color-primary), #D4A853); } .rpt-header-title { font-size: 1.1rem; font-weight: 700; color: var(--kendo-color-on-app-surface); margin: 0 0 4px; letter-spacing: 0.02em; } /* ============================================================ LOOK V2 GLOBAL — color con disciplina (aprobado jul-2026) Nació como piloto en Plan de Cuentas e Inventario/Mantenimiento y se promovió a default de toda la app. Estas reglas van al FINAL del archivo a propósito: ganan por orden los empates de especificidad contra las reglas viejas de .custom-grid/.wl-tile de arriba y contra los temas (este archivo carga último). 1) Botones de acción por fila fantasma (color de rol solo en hover) 2) Header de grid resaltado por tema (banda tintada + hilo dorado) 3) Tiles con chip de icono a color (ciclo de 6 por posición) 4) Sin rejilla vertical en grids + filas con aire 5) Caja RESUMEN estilo KPI 6) Toolbar con jerarquía (solo la acción principal lleva color) 7) AppBar navy elevado con hilo dorado (solo tema oscuro) ============================================================ */ /* ---------- Punto 2: header de grid sutil ---------- */ .custom-grid .k-grid-header th, html[data-theme="light"] .custom-grid .k-grid-header th { background-color: var(--kendo-color-surface-alt); color: var(--kendo-color-subtle); border-bottom: 1px solid var(--kendo-color-border-alt); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } /* En tema claro surface-alt es blanco → banda con tinte navy y títulos en el navy corporativo para que el header resalte de las filas */ html[data-theme="light"] .custom-grid .k-grid-header th { background-color: #E3EAF4; color: #1E3A5F; border-bottom: 2px solid var(--wl-accent-gold, #D4A853); } html[data-theme="light"] .custom-grid .k-grid-header th .k-column-title, html[data-theme="light"] .custom-grid .k-grid-header th .k-svg-icon { color: #1E3A5F; } html[data-theme="light"] .custom-grid .k-filter-row th { background-color: #F8FAFC; } /* En tema oscuro surface-alt ≈ el fondo de las filas → banda un punto más clara, texto más luminoso y subrayado dorado (acento de marca) */ :root:not([data-theme="light"]) .custom-grid .k-grid-header th { background-color: #3D4470; color: #E2E5F2; border-bottom: 2px solid color-mix(in srgb, var(--wl-accent-gold, #CCB066) 55%, transparent); } :root:not([data-theme="light"]) .custom-grid .k-grid-header th .k-column-title, :root:not([data-theme="light"]) .custom-grid .k-grid-header th .k-svg-icon { color: #E2E5F2; } .custom-grid .k-grid-header th .k-column-title, html[data-theme="light"] .custom-grid .k-grid-header th .k-column-title { color: var(--kendo-color-subtle); } /* Iconos de sort/filter del header acompañan el gris */ .custom-grid .k-grid-header th .k-svg-icon { color: var(--kendo-color-subtle); } /* ---------- Punto 1: botones de acción fantasma ---------- */ /* Neutralizar los sólidos Info/Success/Error dentro de las celdas del grid; el color de rol vuelve solo en hover/focus. Telerik 14 renderiza .k-button-info (sin "solid"). */ .custom-grid td .k-button-info, .custom-grid td .k-button-success, .custom-grid td .k-button-error { background: transparent; background-image: none; border-color: transparent; box-shadow: none; color: var(--kendo-color-subtle); } .custom-grid td .k-button-info:hover, .custom-grid td .k-button-info.k-hover, .custom-grid td .k-button-info:focus-visible { background: color-mix(in srgb, var(--kendo-color-info) 12%, transparent); color: var(--kendo-color-info); } .custom-grid td .k-button-success:hover, .custom-grid td .k-button-success.k-hover, .custom-grid td .k-button-success:focus-visible { background: color-mix(in srgb, var(--kendo-color-success) 12%, transparent); color: var(--kendo-color-success); } .custom-grid td .k-button-error:hover, .custom-grid td .k-button-error.k-hover, .custom-grid td .k-button-error:focus-visible { background: color-mix(in srgb, var(--kendo-color-error) 12%, transparent); color: var(--kendo-color-error); } /* ---------- Punto 3: tiles con chip de icono a color ---------- */ /* Alineación a la izquierda + icono dentro de un chip redondeado con fondo tintado. El color cicla por posición (nth-child sobre los hijos del grid, sea TileGate o el botón directo) — sin tocar markup. */ button.wl-tile.k-button, .wl-tile.k-button { align-items: flex-start; justify-content: flex-start; text-align: left; padding: 18px; /* Mismo degradado radial de las k-card (brillo central) — aprobado jul-2026 */ background: var(--card-gradient, var(--kendo-color-surface)); } .wl-tile-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--wl-tile-accent, #3B82F6); background: color-mix(in srgb, var(--wl-tile-accent, #3B82F6) 13%, transparent); } /* Los temas pintan el icono con su propio color (reglas con html/:root delante) — re-afirmar el color del chip a la misma altura */ :root .wl-tile-icon, html[data-theme="light"] .wl-tile-icon { color: var(--wl-tile-accent, #3B82F6); } /* Ciclo de 6 colores por posición del tile en el grid (custom property para que el hover pueda re-usar el mismo color sin repetir el ciclo) */ .wl-tiles-grid > *:nth-child(6n+2) { --wl-tile-accent: #8B5CF6; } .wl-tiles-grid > *:nth-child(6n+3) { --wl-tile-accent: #14B8A6; } .wl-tiles-grid > *:nth-child(6n+4) { --wl-tile-accent: #D97706; } .wl-tiles-grid > *:nth-child(6n+5) { --wl-tile-accent: #22C55E; } .wl-tiles-grid > *:nth-child(6n+6) { --wl-tile-accent: #EC4899; } /* Los temas recolorean el icono en hover (reglas :root / [data-theme=light] más específicas) — re-afirmar el color del chip con la misma altura */ :root button.wl-tile.k-button:hover .wl-tile-icon, :root .wl-tile.k-button:hover .wl-tile-icon, html[data-theme="light"] button.wl-tile.k-button:hover .wl-tile-icon, html[data-theme="light"] .wl-tile.k-button:hover .wl-tile-icon { color: var(--wl-tile-accent, #3B82F6); } /* ---------- Punto 4: matar la rejilla de hoja de cálculo ---------- */ /* Sin líneas verticales entre columnas: solo separadores horizontales suaves. Es lo que más diferencia una tabla moderna de una FoxPro. .k-grid.custom-grid (mismo elemento, doble clase) para ganarle a las reglas de tamaño de Kendo (.k-table.k-table-sm .k-table-td, etc.) */ .k-grid.custom-grid .k-table-th, .k-grid.custom-grid .k-table-td, .k-grid.custom-grid .k-filter-row th { border-left-width: 0; border-right-width: 0; border-inline-start-width: 0; border-inline-end-width: 0; } /* Filas con más aire y tipografía un punto más grande */ .custom-grid { font-size: 13px; } .k-grid.custom-grid .k-table-td { padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--kendo-color-border) 60%, transparent); } /* ---------- Punto 5: caja RESUMEN como KPI (adiós banner dorado) ---------- */ .wl-info-box, html[data-theme="light"] .wl-info-box { /* Mismo degradado radial de las k-card (brillo central) — aprobado jul-2026 */ background: var(--card-gradient, var(--kendo-color-surface)); border: 1px solid var(--kendo-color-border); border-left: 3px solid var(--kendo-color-primary); width: fit-content; min-width: 240px; padding: 12px 20px; } .wl-info-box-label, html[data-theme="light"] .wl-info-box-label { color: var(--kendo-color-subtle); font-size: 0.72rem; font-weight: 600; } .wl-info-box-value, html[data-theme="light"] .wl-info-box-value { color: var(--kendo-color-on-app-surface); font-size: 1.4rem; } /* ---------- Punto 6: toolbar con jerarquía ---------- */ /* Las acciones con rol declarado (ThemeColor sólido: Primary/Info/ Success/Error/Warning — ej. Aprobar Seleccionadas, Devolver con motivo, Generar desde RQ) conservan su color; SOLO los botones base (export, filtros, utilitarios) se vuelven fantasma. Antes la regla dejaba con color únicamente el plus-circle y las acciones principales de Aprobaciones quedaban invisibles en tema oscuro. */ /* El :not(:has(plus-circle)) es obligatorio: sin él esta regla (8 clases de especificidad) le gana el background a la del botón Agregar (4 clases) y el CTA queda texto blanco sobre fondo transparente — invisible en tema claro. */ .custom-grid .k-toolbar .k-button:not(.k-button-primary):not(.k-button-info):not(.k-button-success):not(.k-button-error):not(.k-button-warning):not(:has(.k-svg-i-plus-circle)) { background: transparent; border-color: transparent; box-shadow: none; } .custom-grid .k-toolbar .k-button:not(.k-button-primary):not(.k-button-info):not(.k-button-success):not(.k-button-error):not(.k-button-warning):not(:has(.k-svg-i-plus-circle)):hover { background: var(--kendo-color-base-subtle); } .custom-grid .k-toolbar .k-button:has(.k-svg-i-plus-circle) { background: var(--kendo-color-primary); border-color: var(--kendo-color-primary); color: var(--kendo-color-on-primary); } .custom-grid .k-toolbar .k-button:has(.k-svg-i-plus-circle):hover { background: var(--kendo-color-primary-hover); } /* La lupa del search box del toolbar es un k-button interno — que siga discreta pero sin fondo primario */ .custom-grid .k-toolbar .k-searchbox .k-button { background: transparent; border-color: transparent; } /* ---------- Punto 7: barra superior con presencia (solo tema oscuro) ---------- */ /* El AppBar Inverse trae un gris neutro que no pertenece a la familia navy del fondo (#151828). Navy elevado + hilo dorado, misma firma que el header del grid. NOTA: el AppBar es del layout global — este cambio aplica a TODA la app en oscuro, no solo a las pantallas piloto. */ :root:not([data-theme="light"]) .k-appbar.k-appbar-inverse { background-color: #232A45; box-shadow: 0 1px 0 color-mix(in srgb, var(--wl-accent-gold, #CCB066) 40%, transparent), 0 4px 16px rgba(0, 0, 0, 0.35); } .rpt-header-subtitle { font-size: 0.82rem; color: var(--kendo-color-subtle); margin: 0; } .rpt-header-period { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; background: var(--kendo-color-primary-subtle); border-radius: 12px; font-size: 0.78rem; font-weight: 600; color: var(--kendo-color-primary); } /* --- Tabla del reporte --- */ .rpt-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; line-height: 1.5; } .rpt-table thead { position: sticky; top: 0; z-index: 2; } .rpt-table thead th { background: var(--kendo-color-primary); color: var(--kendo-color-on-primary); padding: 10px 12px; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--kendo-color-primary-emphasis); white-space: nowrap; } .rpt-table tbody td { padding: 6px 12px; border-bottom: 1px solid var(--kendo-color-border); color: var(--kendo-color-on-app-surface); } .rpt-table tbody tr:hover { background: var(--kendo-color-base-subtle-hover); } /* --- Filas especiales --- */ .rpt-row-title { background: var(--kendo-color-base-subtle) !important; font-weight: 700; font-size: 0.84rem; color: var(--kendo-color-on-app-surface); letter-spacing: 0.01em; } .rpt-row-title td { padding: 8px 12px; border-bottom: 1px solid var(--kendo-color-border); } .rpt-row-total { font-weight: 700; border-top: 2px double var(--kendo-color-on-app-surface) !important; } .rpt-row-total td { padding: 8px 12px; border-bottom: 2px solid var(--kendo-color-border); } .rpt-row-separator td { height: 8px; padding: 0; border: none; background: transparent; } /* --- Indentación jerárquica --- */ .rpt-indent-1 { padding-left: 24px !important; } .rpt-indent-2 { padding-left: 40px !important; } .rpt-indent-3 { padding-left: 56px !important; } .rpt-indent-4 { padding-left: 72px !important; } .rpt-indent-5 { padding-left: 88px !important; } .rpt-indent-6 { padding-left: 104px !important; } /* --- Columnas de montos --- */ .rpt-col-monto { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; } /* --- Negativos entre paréntesis --- */ .rpt-negative { color: var(--kendo-color-error); } /* --- Alternancia de filas --- */ .rpt-table tbody tr:nth-child(even):not(.rpt-row-title):not(.rpt-row-total):not(.rpt-row-separator) { background: var(--kendo-color-surface-alt); } /* --- Filtros del reporte --- */ .rpt-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--kendo-color-surface-alt); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg); } .rpt-filters label { font-size: 0.78rem; font-weight: 600; display: block; margin-bottom: 4px; color: var(--kendo-color-subtle); text-transform: uppercase; letter-spacing: 0.04em; } /* --- Scroll body del reporte cuando es largo --- */ .rpt-scroll-body { max-height: 70vh; overflow-y: auto; overflow-x: auto; } /* Scrollbar personalizado para el reporte */ .rpt-scroll-body::-webkit-scrollbar { width: 6px; height: 6px; } .rpt-scroll-body::-webkit-scrollbar-track { background: transparent; } .rpt-scroll-body::-webkit-scrollbar-thumb { background: var(--kendo-color-border); border-radius: 3px; } .rpt-scroll-body::-webkit-scrollbar-thumb:hover { background: var(--kendo-color-subtle); } /* --- Light theme overrides para reportes --- */ html[data-theme="light"] .rpt-container { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } html[data-theme="light"] .rpt-header { background: #F7FAFC; border-bottom-color: #E2E8F0; } html[data-theme="light"] .rpt-header::before { background: linear-gradient(90deg, #1E3A5F, #D4A853); } html[data-theme="light"] .rpt-header-title { color: #1A202C; } html[data-theme="light"] .rpt-header-period { background: #EBF0F7; color: #1E3A5F; } html[data-theme="light"] .rpt-table thead th { background: #1E3A5F; color: #FFFFFF; border-bottom-color: #D4A853; } html[data-theme="light"] .rpt-table tbody td { border-bottom-color: #E2E8F0; color: #1A202C; } html[data-theme="light"] .rpt-table tbody tr:hover { background: #EDF2F7; } html[data-theme="light"] .rpt-row-title { background: #F7FAFC !important; color: #1E3A5F; } html[data-theme="light"] .rpt-row-total td { border-bottom-color: #CBD5E0; } html[data-theme="light"] .rpt-table tbody tr:nth-child(even):not(.rpt-row-title):not(.rpt-row-total):not(.rpt-row-separator) { background: #FAFCFF; } html[data-theme="light"] .rpt-filters { background: #F7FAFC; border-color: #E2E8F0; } html[data-theme="light"] .rpt-negative { color: #C53030; } /* --- Print styles para reportes --- */ @media print { .rpt-filters, [class*="menu-"], .k-drawer, .k-appbar, .wl-tiles-section, .wl-tiles-grid { display: none !important; } .rpt-container { box-shadow: none; border: none; border-radius: 0; } .rpt-table { font-size: 9pt; width: 100%; } .rpt-table thead th { background: #333 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rpt-row-title { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rpt-scroll-body { max-height: none; overflow: visible; } /* Lo que no es el estado (filtros, tarjetas, grid de trabajo) no se imprime. */ .wl-no-print { display: none !important; } .wl-fe-formal { box-shadow: none; border: none; } @page { margin: 15mm; } } /* === Formato formal del Flujo de Efectivo (auditoría): cifras alineadas, subtítulos NIC 7 en cursiva, notas numeradas y dos espacios de firma. === */ .wl-fe-formal td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .wl-fe-formal .wl-fe-sub td { font-style: italic; padding-left: 24px; color: var(--kendo-color-subtle); } .wl-fe-formal .wl-fe-notas ol { padding-left: 1.4rem; font-size: 0.82rem; } .wl-fe-firmas { display: flex; gap: 48px; margin-top: 48px; font-size: 0.82rem; } .wl-fe-firmas > div { flex: 1; text-align: center; } .wl-fe-firma-linea { border-top: 1px solid var(--kendo-color-on-app-surface); margin-bottom: 4px; } /* === Callout informativo (look v2) — banner sutil legible en AMBOS temas. Usa los tokens adaptativos del tema (primary-subtle: #1B2C4F oscuro / #EBF0F7 claro); el texto hereda el color del body de cada tema. Reemplaza los inline styles fijos background:#eff6ff que eran ilegibles en tema oscuro (texto claro sobre fondo claro). === */ .wl-callout-info { background: var(--kendo-color-primary-subtle); border-radius: 6px; border-left: 3px solid var(--kendo-color-primary); } /* === Cards Bootstrap siguen el tema (look v2) — los paneles .card de los dashboards (S31N29 AjusteNGP/CopiarCapas/EstadoPeriodos, Inventario Home) quedaban SIEMPRE blancos en tema oscuro: Bootstrap no conoce el toggle. ACOTADO al contenedor .wl-max-w-1100 de esos dashboards: el login (y cualquier página fuera del shell) no participa del toggle — sin data-theme los tokens :root son los oscuros y una regla global .card lo pintaba de noche sobre fondo claro. Tablas y text-muted internos incluidos. === */ /* El cuerpo va en surface, NO en surface-alt: son las cards de Bootstrap de los dashboards, y tienen que pesar lo mismo que las de Kendo de la misma pantalla. Mientras en el tema claro los dos tokens fueron blanco daba igual; al devolverle a surface-alt su tono propio (#F4F7FB) estas quedaron a 8 puntos del fondo y las de Kendo a 19. La cabecera sigue en app-surface, que es lo que las delimita. */ .wl-max-w-1100 .card { background-color: var(--kendo-color-surface); color: var(--kendo-color-on-app-surface); border-color: var(--kendo-color-border); } .wl-max-w-1100 .card .card-header { background-color: var(--kendo-color-app-surface); color: var(--kendo-color-on-app-surface); border-bottom-color: var(--kendo-color-border); } .wl-max-w-1100 .card .text-muted { color: var(--kendo-color-subtle) !important; } .wl-max-w-1100 .card .table { color: var(--kendo-color-on-app-surface); --bs-table-bg: transparent; --bs-table-color: var(--kendo-color-on-app-surface); --bs-table-striped-color: var(--kendo-color-on-app-surface); --bs-table-hover-color: var(--kendo-color-on-app-surface); --bs-table-hover-bg: var(--kendo-color-base-subtle); } /* ==================== UTILIDADES SEMANTICAS (barrido hex jul-2026) ==================== Reemplazan los hex inline de los .razor. Mantener al FINAL del archivo: los selectores html .k-card.wl-kpi-* empatan en especificidad con los overrides de tema de .k-card y ganan por orden de aparicion. */ /* KPI cards con acento lateral (patron Compras/Reportes) */ html .k-card.wl-kpi-info, html[data-theme] .k-card.wl-kpi-info { background: var(--kendo-color-info-subtle); border-left: 4px solid var(--kendo-color-info); } html .k-card.wl-kpi-warning, html[data-theme] .k-card.wl-kpi-warning { background: var(--kendo-color-warning-subtle); border-left: 4px solid var(--kendo-color-warning); } html .k-card.wl-kpi-success, html[data-theme] .k-card.wl-kpi-success { background: var(--kendo-color-success-subtle); border-left: 4px solid var(--kendo-color-success); } html .k-card.wl-kpi-error, html[data-theme] .k-card.wl-kpi-error { background: var(--kendo-color-error-subtle); border-left: 4px solid var(--kendo-color-error); } html .k-card.wl-kpi-error-strong, html[data-theme] .k-card.wl-kpi-error-strong { background: var(--kendo-color-error-subtle); border-left: 4px solid var(--kendo-color-error-emphasis); } html .k-card.wl-kpi-neutral, html[data-theme] .k-card.wl-kpi-neutral { background: var(--kendo-color-surface); border-left: 4px solid var(--kendo-color-subtle); } /* Badges pastel (fondo subtle + texto fuerte) — para inline en celdas */ .wl-badge-success-subtle { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success-on-subtle); } .wl-badge-error-subtle { background: var(--kendo-color-error-subtle); color: var(--kendo-color-error-on-subtle); } .wl-badge-warning-subtle { background: var(--kendo-color-warning-subtle); color: var(--kendo-color-warning-on-subtle); } .wl-badge-neutral { background: var(--kendo-color-base-subtle); color: var(--kendo-color-on-subtle); } .wl-badge-info-subtle { background: var(--kendo-color-info-subtle); color: var(--kendo-color-info-on-subtle); } /* Fichas de codigo del editor de formulas de nomina: el codigo en monoespaciada pegado a su nombre, dentro de un badge pastel que dice de que tipo es. */ .wl-ficha-codigo { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 400; max-width: 100%; /* Tamano propio y no el .badge de Bootstrap: aquel es .75em RELATIVO al padre, y dentro del tab la ficha caia a 9,75px (medido), ilegible para leer un nombre. */ font-size: .78rem; } /* Un campo del concepto en la prueba con un trabajador (Formula / Detalle). Van en cajas separadas porque son dos magnitudes distintas: bolivares y cantidad. */ .wl-bloque-prueba { border: 1px solid var(--kendo-color-border); border-radius: 6px; overflow: hidden; } .wl-bloque-prueba-h { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; background: var(--kendo-color-base-subtle); color: var(--kendo-color-on-subtle); font-size: .82rem; } .wl-bloque-prueba-res { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 10px; border-radius: 4px; background: var(--kendo-color-success-subtle); color: var(--kendo-color-success-on-subtle); font-size: .85rem; } .wl-bloque-prueba-res strong { font-size: 1rem; } /* Cifras que se comparan en columna: los digitos alineados evitan leer mal un monto. */ .wl-numero { font-variant-numeric: tabular-nums; } /* La formula con los valores ya sustituidos, tal como la deja el motor para su auditoria. Es larga por naturaleza, asi que rueda sola en vez de romper la pagina. */ .wl-formula-resuelta { font-family: var(--kendo-font-family-monospace, monospace); font-size: .78rem; background: var(--kendo-color-base-subtle); color: var(--kendo-color-on-subtle); border-radius: 4px; padding: 6px 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } /* Sugerencias del editor de formulas (formula-autocompletar.js). La caja la crea el JS, asi que su aspecto vive aqui y no en un style inline: asi sigue los tokens del tema. */ .wl-autocompletar { position: fixed; z-index: 11000; max-height: 260px; overflow-y: auto; background: var(--kendo-color-surface-alt); color: var(--kendo-color-on-app-surface); border: 1px solid var(--kendo-color-border); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .wl-autocompletar > div { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; font-size: .8rem; cursor: pointer; } .wl-autocompletar > div.sel, .wl-autocompletar > div:hover { background: var(--kendo-color-primary-subtle); } .wl-autocompletar code { font-family: var(--kendo-font-family-monospace, monospace); font-weight: 700; color: inherit; background: none; padding: 0; min-width: 3.2em; } .wl-autocompletar span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wl-autocompletar em { flex: 0 0 auto; font-style: normal; font-size: .72rem; color: var(--kendo-color-subtle); } /* Ultima linea cuando la lista se corta en MAX: informa, no se elige. */ .wl-autocompletar > div.mas { cursor: default; font-size: .72rem; color: var(--kendo-color-subtle); border-top: 1px solid var(--kendo-color-border); } .wl-autocompletar > div.mas:hover { background: none; } /* Catalogo de codigos del editor de formulas (CatalogoCodigosFormula): pestanas por tipo y una lista con scroll en vez de un grid paginado. Las pestanas solo eligen, no tienen contenido: el panel de contenido del TabStrip se oculta. */ /* !important: Telerik le pone display inline al panel activo. */ .wl-catalogo-tabs .k-tabstrip-content { display: none !important; } /* Compactas: la columna es angosta y las cuatro se reparten en dos filas. */ .wl-catalogo-tabs .k-tabstrip-item { font-size: .78rem; padding-block: 2px; } .wl-catalogo-tabs .k-tabstrip-item .k-link { padding: 4px 8px; } .wl-catalogo-lista { max-height: 440px; overflow-y: auto; border: 1px solid var(--kendo-color-border); border-top: 0; border-radius: 0 0 4px 4px; } .wl-catalogo-fila { display: flex; align-items: flex-start; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--kendo-color-border); cursor: pointer; font-size: .82rem; } .wl-catalogo-fila:last-child { border-bottom: 0; } .wl-catalogo-fila:hover { background: var(--kendo-color-primary-subtle); } .wl-catalogo-fila > .badge { flex: 0 0 auto; margin-top: 2px; } .wl-catalogo-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .wl-ficha-codigo > code { font-family: var(--kendo-font-family-monospace, monospace); font-weight: 700; color: inherit; background: none; padding: 0; } /* Badges solidos */ .wl-badge-primary-solid { background: var(--kendo-color-primary); color: var(--kendo-color-on-primary); } .wl-badge-success-solid { background: var(--kendo-color-success); color: var(--kendo-color-on-success); } .wl-badge-warning-solid { background: var(--kendo-color-warning); color: var(--kendo-color-on-warning); } .wl-badge-error-solid { background: var(--kendo-color-error); color: var(--kendo-color-on-error); } /* Variantes "strong" (emphasis) — distinguen verde oscuro/rojo oscuro de sus versiones normales */ .wl-badge-success-strong-solid { background: var(--kendo-color-success-emphasis); color: var(--kendo-color-on-success); } .wl-badge-error-strong-solid { background: var(--kendo-color-error-emphasis); color: var(--kendo-color-on-error); } /* Morado de cadenas de aprobacion (color de marca fijo, sin token kendo) */ .wl-badge-purple { background: #6A0DAD; color: #fff; } /* dark es el tema por defecto (sin data-theme); light se marca con html[data-theme="light"] */ .wl-bg-purple-subtle { background: #3A2352; } html[data-theme="light"] .wl-bg-purple-subtle { background: #F0E6FF; } /* Vista Tablero de Aprobaciones de OC (Aprobaciones.razor). Solo tokens del tema, para que funcione igual en claro y oscuro. */ .wl-tablero-col-header { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 600; } /* El tema le da 20px de relleno a la tarjeta: con 40 por columna son demasiado altas. */ .wl-tablero-aprob .k-taskboard-card { padding: 10px 12px; } .wl-tablero-card { font-size: 0.8rem; line-height: 1.45; cursor: pointer; } .wl-tablero-card-oc { font-weight: 600; color: var(--kendo-color-primary); } .wl-tablero-card-prio { padding: 1px 8px; border-radius: 10px; font-size: 0.65rem; font-weight: 600; } .wl-tablero-card-prov { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-tablero-card-monto { font-weight: 600; font-size: 0.9rem; } .wl-tablero-card-pie { gap: 8px; font-size: 0.7rem; color: var(--kendo-color-subtle); } .wl-tablero-card-pie > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Chip de cadena de aprobacion (Aprobaciones*.razor) */ .wl-chip-info { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; background: var(--kendo-color-info-subtle); color: var(--kendo-color-info-emphasis); } /* Cajas de aviso con borde (patron AsientosContablesInv) */ .wl-alert-error { background: var(--kendo-color-error-subtle); border: 1px solid var(--kendo-color-error); border-radius: 4px; } .wl-alert-warning { background: var(--kendo-color-warning-subtle); border: 1px solid var(--kendo-color-warning); border-radius: 4px; } /* ---- Lía lee la factura (ComprasFormV2): marcas por campo y resumen ---- Dorado = lo llenó Lía; ámbar = revísalo; rojo = confírmalo contra el papel. La franja va por box-shadow interno para no mover el layout del input Telerik. */ :root { --wl-lia: #D4A853; --wl-lia-subtle: #FDF8ED; --wl-lia-ink: #7A5A16; } html[data-theme="dark"], .k-dark { --wl-lia: #D4BC7D; --wl-lia-subtle: #2A2618; --wl-lia-ink: #E9D9A8; } .wl-lia-leido .k-input, .wl-lia-leido .k-picker, .wl-lia-leido .k-textarea { border-color: var(--wl-lia); box-shadow: inset 3px 0 0 var(--wl-lia); } .wl-lia-revisar .k-input, .wl-lia-revisar .k-picker { border-color: var(--kendo-color-warning); box-shadow: inset 3px 0 0 var(--kendo-color-warning); } .wl-lia-dudoso .k-input, .wl-lia-dudoso .k-picker { border-color: var(--kendo-color-error); box-shadow: inset 3px 0 0 var(--kendo-color-error); background: var(--kendo-color-error-subtle); } .wl-lia-nota { font-size: 11px; line-height: 1.3; margin-top: 3px; color: var(--kendo-color-subtle); } .wl-lia-dudoso .wl-lia-nota { color: var(--kendo-color-error); } .wl-lia-revisar .wl-lia-nota { color: var(--kendo-color-warning-emphasis, var(--kendo-color-warning)); } .wl-lia-resumen { background: var(--wl-lia-subtle); border: 1px solid var(--wl-lia); border-radius: 6px; } .wl-lia-resumen .wl-lia-titulo { color: var(--wl-lia-ink); font-weight: 600; } .wl-lia-resumen ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; } .wl-lia-resumen li { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; } .wl-lia-resumen .wl-lia-ic { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 2px; display: grid; place-items: center; font-size: 10px; font-weight: 700; } .wl-lia-ic-leido { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success); } .wl-lia-ic-revisar { background: var(--kendo-color-warning-subtle); color: var(--kendo-color-warning); } .wl-lia-ic-dudoso { background: var(--kendo-color-error-subtle); color: var(--kendo-color-error); } .wl-lia-leyenda { font-size: 11.5px; color: var(--kendo-color-subtle); display: flex; gap: 14px; flex-wrap: wrap; } .wl-lia-leyenda i { display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; } .wl-btn-lia.k-button { background: var(--wl-lia); border-color: var(--wl-lia); color: #2A1F05; font-weight: 600; } .wl-btn-lia.k-button:hover { filter: brightness(0.95); } /* Fondos utilitarios */ .wl-bg-surface { background: var(--kendo-color-surface); } .wl-bg-info-subtle { background: var(--kendo-color-info-subtle); } .wl-bg-success-subtle { background: var(--kendo-color-success-subtle); } .wl-bg-warning-subtle { background: var(--kendo-color-warning-subtle); } .wl-bg-error-subtle { background: var(--kendo-color-error-subtle); } /* Textos con enfasis que no cubre k-text-* */ .wl-text-error-strong { color: var(--kendo-color-error-emphasis); } .wl-text-warning-strong { color: var(--kendo-color-warning-on-subtle); } /* Hero navy de S31N29 (gradiente corporativo; el titulo cambia a primario en dark) */ .wl-hero-gradient { background: linear-gradient(135deg, #1E3A5F, #2C5282); color: #fff; } .wl-hero-header { background: linear-gradient(135deg, var(--wl-hero-from, #1E3A5F), var(--wl-hero-to, #2C5282)); color: var(--kendo-color-on-primary); border-radius: 8px 8px 0 0; } /* Bootstrap fija color directamente en h1-h6 (var(--bs-heading-color)), ganándole al color heredado del contenedor — en tema claro eso dejaba el título oscuro e ilegible sobre el navy. Forzar el color de contraste en los headings del hero. */ .wl-hero-header :is(h1, h2, h3, h4, h5, h6) { color: var(--kendo-color-on-primary); } .wl-bg-hero { background: var(--kendo-color-primary); } .wl-text-hero { color: var(--kendo-color-primary); } html[data-theme="light"] .wl-bg-hero { background: #1E3A5F; } html[data-theme="light"] .wl-text-hero { color: #1E3A5F; } /* Nota al pie de reportes (BalanceRevision) */ .wl-footnote { color: var(--kendo-color-subtle); border-top: 1px solid var(--kendo-color-border); background: var(--kendo-color-surface); } /* Borde lateral sutil (alertas informativas de reportes) */ .wl-border-start-subtle { border-left: 4px solid var(--kendo-color-subtle); } /* Sub-header de seleccion (Compradores) */ .wl-subheader { background: var(--kendo-color-primary-subtle); color: var(--kendo-color-on-app-surface); } /* Subtitulo tenue SOBRE el hero navy (.k-card-header): k-text-subtle da gris ilegible sobre el primary; esto usa on-primary atenuado, legible en dark y light. */ .wl-hero-subtle { color: var(--kendo-color-on-primary); opacity: 0.75; } /* Chip SOBRE el hero (.k-card-header), misma trampa que el subtitulo de arriba: wl-chip-info pinta info-subtle con texto info-emphasis, o sea azul sobre azul, y encima del primary no se lee. Este se apoya en on-primary translucido, que contrasta en dark y en light sin fijar ningun color. */ .wl-hero-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; background: color-mix(in srgb, var(--kendo-color-on-primary) 18%, transparent); color: var(--kendo-color-on-primary); } /* Un boton flat dentro del chip hereda el color primary del tema, que sobre el propio primary es invisible. */ .wl-hero-chip .k-button-flat, .wl-hero-chip .k-button-flat .k-button-text { color: var(--kendo-color-on-primary); } .wl-hero-chip .k-button-flat:hover { background: color-mix(in srgb, var(--kendo-color-on-primary) 15%, transparent); } /* Formula de nomina evaluada (Revision de Conceptos): texto tecnico, monoespaciado y con salto de linea para que no desborde el modal. */ .wl-formula { background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-md); padding: 8px 10px; margin: 0; font-family: Consolas, "Courier New", monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; } /* Composicion de la formula en sus tres lecturas: definicion, en palabras y con los montos. Cada lectura lleva su etiqueta a la izquierda. */ .wl-formula-bloque { border-left: 3px solid var(--kendo-color-primary); padding-left: 12px; } .wl-formula-titulo { font-weight: 600; margin-bottom: 6px; } .wl-formula-fila + .wl-formula-fila { margin-top: 8px; } .wl-formula-etiqueta { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-bottom: 2px; } /* La traduccion se lee como prosa: tipografia normal, no monoespaciada. */ .wl-formula-palabras { background: var(--kendo-color-surface-alt); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-md); padding: 8px 10px; font-size: 0.9rem; line-height: 1.45; } /* Fondo gris del visor PDF (chrome del visor, independiente del tema) */ .wl-pdf-surface { background: #525659; } /* Salida de un arranque de migraciones (Administracion > Migraciones): se lee como consola, conserva los saltos de linea y hace su propio scroll para no estirar la ventana ni la tarjeta del error. */ .wl-log-migracion { background: var(--kendo-color-surface-alt); color: var(--kendo-color-on-app-surface); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-md); padding: 8px 10px; font-family: Consolas, "Courier New", monospace; font-size: 0.78rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto; } /* El Width de TelerikWindow es fijo: sin techo se corta por los dos lados en pantallas chicas (ver skill telerik-gotchas). */ .k-window.wl-ventana-log-migracion { max-width: 96vw; } /* El mismo techo, sin nombre de pantalla: para cualquier TelerikWindow ancha (Class="wl-ventana-ancha"). El contenido que no quepa hace scroll DENTRO de la ventana. */ .k-window.wl-ventana-ancha { max-width: 96vw; max-height: 94vh; } .k-window.wl-ventana-ancha .k-window-content { overflow: auto; } /* === Superficie de las secciones de formulario ============================== Los formularios armados con

no tenian area de trabajo: se midio la cadena completa en Registro de Compras y TODOS los contenedores eran transparentes —fieldset, div.compras-form-v2, div.col.p-3, div.k-drawer-content— asi que el formulario se apoyaba directo sobre el fondo del body. Mientras el fondo del tema claro fue #F7FAFC (3 puntos del blanco) nadie lo noto; con #ECF0F6 (19 puntos) quedo a la vista que esa superficie nunca existio. En oscuro faltaba desde siempre: #151828 contra #2F344C. 🔴 El !important del borde no es capricho: Bootstrap declara .border con !important y sin el gana el gris 222,226,230. Mismo gotcha que las fichas de la mesa en Conciliacion Manual. Alcance: los 17 archivos que usan este patron, en Compras y Contabilidad (`grep -rl 'fieldset class="border"' --include=*.razor`). NO cubre las demas pantallas sin superficie, que usan otras estructuras y van aparte. */ fieldset.border { background: var(--kendo-color-surface); border-color: var(--kendo-color-border) !important; }