/* ========================================================================== Kratos — paleta de marca BV NUÑEZ Extraída por muestreo de píxel de docs/Bv/LOGO SIN FONDO BV NUÑEZ.png. No inventar otros tonos sin relación a estos dos. ========================================================================== */ :root { --kratos-navy: #091426; --kratos-navy-2: #0f1d33; --kratos-navy-3: #16263f; --kratos-navy-deep: #050c18; --kratos-gold: #C0B07D; --kratos-gold-dark: #9c8f66; --kratos-gold-light: #ded4b7; --kratos-bg: #f6f5f2; --kratos-surface: #ffffff; --kratos-border: #e4e1d6; --kratos-text: #091426; --kratos-text-muted: #5c6472; --kratos-heading: var(--kratos-navy); } /* ========================================================================== Modo oscuro — activado poniendo data-bs-theme="dark" en (ver App.razor y kratosTema en interop.js). Bootstrap 5.3 ya trae soporte de tema oscuro incorporado para sus propios componentes (cards, tablas, dropdowns, formularios) vía este mismo atributo; solo hace falta redefinir la escala neutra de Kratos y los puntos donde se usó var(--kratos-navy) directamente como color de TEXTO (que se volvería ilegible sobre un fondo oscuro) -- los colores de marca (navy/dorado) en sí no cambian. ========================================================================== */ :root[data-bs-theme="dark"] { --kratos-bg: #0b1220; --kratos-surface: #121b2e; --kratos-border: #263047; --kratos-text: #e7e4d9; --kratos-text-muted: #97a0b3; --kratos-heading: var(--kratos-gold-light); } [data-bs-theme="dark"] .bi { filter: invert(1) hue-rotate(180deg); } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--kratos-bg); color: var(--kratos-text); } /* ========================================================================== Enlaces y foco ========================================================================== */ a, .btn-link { color: var(--kratos-navy); } a:hover, .btn-link:hover { color: var(--kratos-gold-dark); } [data-bs-theme="dark"] a, [data-bs-theme="dark"] .btn-link { color: var(--kratos-gold-light); } [data-bs-theme="dark"] a:hover, [data-bs-theme="dark"] .btn-link:hover { color: var(--kratos-gold); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(192, 176, 125, 0.55); } .form-control:focus, .form-select:focus { border-color: var(--kratos-gold); box-shadow: 0 0 0 0.25rem rgba(192, 176, 125, 0.25); } /* ========================================================================== Botones — Bootstrap fija los colores como variables LOCALES en hex literal por componente (ej. .btn-primary { --bs-btn-bg: #0d6efd }), no heredadas de :root, así que hay que sobreescribir esas variables locales selector por selector. ========================================================================== */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--kratos-navy); --bs-btn-border-color: var(--kratos-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kratos-navy-3); --bs-btn-hover-border-color: var(--kratos-navy-3); --bs-btn-focus-shadow-rgb: 192, 176, 125; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kratos-navy-3); --bs-btn-active-border-color: var(--kratos-navy-3); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--kratos-navy-2); --bs-btn-disabled-border-color: var(--kratos-navy-2); } .btn-outline-primary { --bs-btn-color: var(--kratos-navy); --bs-btn-border-color: var(--kratos-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kratos-navy); --bs-btn-hover-border-color: var(--kratos-navy); --bs-btn-focus-shadow-rgb: 192, 176, 125; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kratos-navy); --bs-btn-active-border-color: var(--kratos-navy); --bs-btn-disabled-color: var(--kratos-navy); --bs-btn-disabled-border-color: var(--kratos-navy); } .btn-secondary { --bs-btn-bg: var(--kratos-gold); --bs-btn-border-color: var(--kratos-gold); --bs-btn-color: var(--kratos-navy); --bs-btn-hover-bg: var(--kratos-gold-dark); --bs-btn-hover-border-color: var(--kratos-gold-dark); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--kratos-gold-dark); --bs-btn-active-border-color: var(--kratos-gold-dark); --bs-btn-active-color: #fff; } .btn-outline-secondary { --bs-btn-color: var(--kratos-gold-dark); --bs-btn-border-color: var(--kratos-gold-dark); --bs-btn-hover-bg: var(--kratos-gold-dark); --bs-btn-hover-border-color: var(--kratos-gold-dark); --bs-btn-hover-color: #fff; } /* En modo oscuro, navy como color de TEXTO/BORDE de botón se vuelve invisible contra un fondo oscuro -- el dorado pasa a ser el acento principal. El fondo navy sólido de .btn-primary sí se deja igual (un botón navy sobre fondo oscuro pierde contraste, por eso también cambia). */ [data-bs-theme="dark"] .btn-primary { --bs-btn-color: var(--kratos-navy-deep); --bs-btn-bg: var(--kratos-gold); --bs-btn-border-color: var(--kratos-gold); --bs-btn-hover-color: var(--kratos-navy-deep); --bs-btn-hover-bg: var(--kratos-gold-light); --bs-btn-hover-border-color: var(--kratos-gold-light); --bs-btn-active-color: var(--kratos-navy-deep); --bs-btn-active-bg: var(--kratos-gold-light); --bs-btn-active-border-color: var(--kratos-gold-light); } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--kratos-gold-light); --bs-btn-border-color: var(--kratos-gold-dark); --bs-btn-hover-color: var(--kratos-navy-deep); --bs-btn-hover-bg: var(--kratos-gold); --bs-btn-hover-border-color: var(--kratos-gold); --bs-btn-active-color: var(--kratos-navy-deep); --bs-btn-active-bg: var(--kratos-gold); --bs-btn-active-border-color: var(--kratos-gold); --bs-btn-disabled-color: var(--kratos-gold-dark); --bs-btn-disabled-border-color: var(--kratos-gold-dark); } /* ========================================================================== Tablas y tarjetas ========================================================================== */ .table { --bs-table-border-color: var(--kratos-border); } .table > thead { border-bottom: 2px solid var(--kratos-heading); } .table-hover > tbody > tr > * { transition: background-color 0.15s ease; } .table-hover > tbody > tr:hover > * { background-color: rgba(192, 176, 125, 0.1); } .card { border-color: var(--kratos-border); box-shadow: 0 1px 3px rgba(9, 20, 38, 0.06); transition: box-shadow 0.15s ease, transform 0.15s ease; } /* ========================================================================== Movimiento suave general — botones con leve elevación al pasar el mouse. Respeta prefers-reduced-motion para accesibilidad. ========================================================================== */ .btn { transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(9, 20, 38, 0.12); } @media (prefers-reduced-motion: reduce) { .btn:not(:disabled):hover, .card { transform: none; } } .card-title { color: var(--kratos-heading); } /* ========================================================================== Contenido ========================================================================== */ .content { padding-top: 1.1rem; } h1, h2, h3, h4, h5 { color: var(--kratos-heading); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ========================================================================== Íconos (globales — CSS isolation NO comparte reglas entre componentes, así que estos data-URI SVG viven acá para poder usarse en cualquier parte: sidebar, topbar, tarjetas). Fill navy por default porque todo el shell ahora es de tema claro (sidebar y topbar blancos). ========================================================================== */ .bi { display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; background-size: cover; vertical-align: -0.2em; } .bi-speedometer2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z'/%3E%3C/svg%3E"); } .bi-building { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v13.5H4V2.5zm-1 0v13.5H1a.5.5 0 0 0 0 1h14a.5.5 0 0 0 0-1h-2V2.5A1.5 1.5 0 0 0 11.5 1h-7A1.5 1.5 0 0 0 3 2.5z'/%3E%3Cpath d='M6 4.5h.5v.5H6v-.5zm0 2h.5v.5H6v-.5zm0 2h.5v.5H6v-.5zm0 2h.5v.5H6v-.5zm2-6h.5v.5H8v-.5zm0 2h.5v.5H8v-.5zm0 2h.5v.5H8v-.5zm0 2h.5v.5H8v-.5zm2-6h.5v.5h-.5v-.5zm0 2h.5v.5h-.5v-.5zm0 2h.5v.5h-.5v-.5zm0 2h.5v.5h-.5v-.5z'/%3E%3C/svg%3E"); } .bi-people-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E"); } .bi-list-ol { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); } .bi-receipt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zM3 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zM3 8.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zM3 10.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27Z'/%3E%3C/svg%3E"); } .bi-file-earmark-text { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0Zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5Z'/%3E%3Cpath d='M4.5 9a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Zm0-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E"); } .bi-person-circle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1Z'/%3E%3C/svg%3E"); } .bi-key-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2ZM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E"); } .bi-person-lines-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3Cpath fill-rule='evenodd' d='M12 8.5a.5.5 0 0 1 .5.5v1.5H14a.5.5 0 0 1 0 1h-1.5V13a.5.5 0 0 1-1 0v-1.5H10a.5.5 0 0 1 0-1h1.5V9a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E"); } .bi-tag-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a1 1 0 0 1 1-1h5.628a2 2 0 0 1 1.414.586l6.415 6.414a2 2 0 0 1 0 2.828l-5.628 5.628a2 2 0 0 1-2.828 0L1.586 9.941A2 2 0 0 1 1 8.528V3a1 1 0 0 1 1-1zm3.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E"); } .bi-bar-chart-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3E%3C/svg%3E"); } .bi-envelope-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E"); } .bi-bell-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2ZM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917ZM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6Z'/%3E%3C/svg%3E"); } .bi-moon-stars-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278Z'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162ZM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1Z'/%3E%3C/svg%3E"); } .bi-sun-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0ZM8 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13ZM2.343 2.343a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 1 1-.707.707L2.343 3.05a.5.5 0 0 1 0-.707ZM11.536 11.536a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 0 1-.707.707l-1.414-1.414a.5.5 0 0 1 0-.707ZM16 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 16 8ZM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8ZM13.657 2.343a.5.5 0 0 1 0 .707L12.243 4.464a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0ZM4.464 11.536a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0Z'/%3E%3C/svg%3E"); } .bi-search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E"); } .bi-house-door-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); } .bi-file-earmark-check-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm.354 4.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L6.5 10.293l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"); } .bi-clipboard-data-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3zM9 9a1 1 0 0 1 2 0v5H9V9zm-3 2a1 1 0 1 1 2 0v3H6v-3zm-2 3v-2a1 1 0 1 0-2 0v2h2z'/%3E%3C/svg%3E"); } .bi-inbox { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4H4.98zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374l3.7-4.625z'/%3E%3C/svg%3E"); } .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 3rem 1.5rem; color: var(--kratos-text-muted); } .empty-state-icon { width: 2.75rem; height: 2.75rem; opacity: 0.35; } .empty-state-msg { margin-bottom: 0.4rem; max-width: 28rem; } .tema-icon-dark { display: none; } [data-bs-theme="dark"] .tema-icon-light { display: none; } [data-bs-theme="dark"] .tema-icon-dark { display: inline-block; } .bi-lock-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); } .bi-box-seam-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113ZM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24ZM7.5 14.762V6.838L1 4.239V11.9a.5.5 0 0 0 .312.463l6.188 2.4ZM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.4a1.5 1.5 0 0 1-.943 1.393l-7.129 2.852a1.5 1.5 0 0 1-1.114 0L.943 13.293A1.5 1.5 0 0 1 0 11.9V3.5a.5.5 0 0 1 .314-.464L7.443.184Z'/%3E%3C/svg%3E"); } .bi-cash-coin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0z'/%3E%3Cpath d='M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.10l-.296-.07v-1.238c.331.036.549.196.6.446h.756c-.047-.53-.483-.939-1.356-.99V8.5h-.375v.447c-.765.073-1.294.5-1.294 1.132 0 .577.4.936 1.045 1.087l.25.06v1.294c-.361-.05-.596-.2-.658-.462H9.438zm1.734-1.396c-.293-.07-.399-.198-.399-.398 0-.229.163-.408.442-.435v.833h-.043zm.246 1.674c.319.077.435.208.435.42 0 .243-.193.434-.55.456v-.876z'/%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v4.243a3 3 0 0 0-1-.343V1.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h7.9c.11.361.264.703.455 1H1.5A1.5 1.5 0 0 1 0 10.5v-9z'/%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h.5a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); } .bi-credit-card-2-front-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1H2zm14 3H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6z'/%3E%3Cpath d='M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1z'/%3E%3C/svg%3E"); } .bi-trash-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); } .bi-arrow-counterclockwise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E"); } .bi-truck { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2 2 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .026.156zM12 10a2 2 0 0 1 1.732 1H15.5a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E"); } .bi-chevron-down { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); } .bi-file-earmark-spreadsheet-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath d='M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4 8h8v1H9v1h2v1H9v1h3v1H4v-1h2v-1H4v-1h2V9H4V8z'/%3E%3C/svg%3E"); } .bi-box-arrow-right { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23091426' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z'/%3E%3C/svg%3E"); } /* ========================================================================== Topbar y sidebar — tema claro (inspirado en paneles SaaS tipo Alegra), con la paleta navy/dorado de BV NUÑEZ en vez de teal. ========================================================================== */ .topbar { display: flex; align-items: center; height: 60px; padding: 0 1.25rem; background: var(--kratos-surface); border-bottom: 1px solid var(--kratos-border); position: sticky; top: 0; z-index: 1040; } .topbar-brand { display: flex; align-items: center; gap: 0.6rem; color: var(--kratos-heading) !important; font-weight: 700; font-size: 1.05rem; text-decoration: none !important; } .topbar-wordmark { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; background: linear-gradient(135deg, var(--kratos-navy) 0%, var(--kratos-navy-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-bs-theme="dark"] .topbar-wordmark { background: linear-gradient(135deg, var(--kratos-gold-light) 0%, var(--kratos-gold) 100%); -webkit-background-clip: text; background-clip: text; } .topbar-wordmark::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--kratos-gold); vertical-align: super; } .topbar-search { position: relative; display: flex; align-items: center; gap: 0.4rem; margin-left: 1.5rem; width: 320px; max-width: 30vw; } .topbar-search .bi-search { position: absolute; left: 0.6rem; opacity: 0.5; pointer-events: none; } .topbar-search input { padding-left: 2rem; } .topbar-search-results { position: absolute; top: calc(100% + 4px); left: 0; width: 22rem; max-width: 80vw; max-height: 60vh; overflow-y: auto; background: var(--kratos-surface); border: 1px solid var(--kratos-border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(9, 20, 38, 0.18); z-index: 1050; } .topbar-search-item { display: block; padding: 0.5rem 0.9rem; font-size: 0.85rem; color: var(--kratos-text); text-decoration: none; border-bottom: 1px solid var(--kratos-border); } .topbar-search-item:last-child { border-bottom: none; } .topbar-search-item:hover { background-color: rgba(192, 176, 125, 0.15); color: var(--kratos-heading); } @media (max-width: 900px) { .topbar-search { display: none; } } .topbar-spacer { flex: 1 1 auto; } .profile-btn { display: flex; align-items: center; gap: 0.6rem; background: transparent; border: 1px solid var(--kratos-border); border-radius: 999px; padding: 0.25rem 0.9rem 0.25rem 0.25rem; color: var(--kratos-text); } .profile-btn:hover, .profile-btn:focus { background: rgba(192, 176, 125, 0.12); border-color: var(--kratos-gold); color: var(--kratos-text); } .profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kratos-navy); color: var(--kratos-gold); font-weight: 700; font-size: 0.8rem; } .profile-name { font-size: 0.9rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--kratos-border); border-radius: 50%; margin-right: 0.6rem; } .notif-btn:hover, .notif-btn:focus { background: rgba(192, 176, 125, 0.12); border-color: var(--kratos-gold); } .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 0.65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .notif-menu { width: 340px; max-width: 90vw; padding-top: 0.5rem; padding-bottom: 0.25rem; } .notif-menu-title { font-weight: 700; color: var(--kratos-heading); font-size: 0.9rem; } .notif-item { display: flex; flex-direction: column; gap: 0.15rem; white-space: normal; padding-top: 0.5rem; padding-bottom: 0.5rem; } .notif-item-unread { background-color: rgba(192, 176, 125, 0.1); border-left: 3px solid var(--kratos-gold); } .notif-item-msg { font-size: 0.85rem; color: var(--kratos-text); } .notif-item-fecha { font-size: 0.72rem; color: var(--kratos-text-muted); } .notif-row-unread { background-color: rgba(192, 176, 125, 0.08); border-left: 3px solid var(--kratos-gold); } .dropdown-menu { border-color: var(--kratos-border); box-shadow: 0 8px 24px rgba(9, 20, 38, 0.18); } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(192, 176, 125, 0.15); color: var(--kratos-heading); } .dropdown-item .bi { margin-right: 0.5rem; } /* ========================================================================== Tarjetas de estadística (dashboards) — título + valor grande + desglose opcional con indicadores de color (mismo lenguaje visual en toda la app). ========================================================================== */ .stat-card-title { font-size: 0.9rem; font-weight: 600; color: var(--kratos-text); margin-bottom: 0.4rem; border-bottom: 2px solid var(--kratos-gold-light); display: inline-block; padding-bottom: 0.15rem; } .stat-card-value { font-size: 1.9rem; font-weight: 700; color: var(--kratos-heading); line-height: 1.15; } .stat-card-subtitle { color: var(--kratos-text-muted); font-size: 0.85rem; } .stat-dot-rows { display: flex; gap: 1.25rem; margin-top: 0.75rem; flex-wrap: wrap; } .stat-dot-row { display: flex; flex-direction: column; gap: 0.15rem; } .stat-dot-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--kratos-text-muted); } .stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .stat-dot-value { font-size: 1.05rem; font-weight: 700; color: var(--kratos-heading); } /* ========================================================================== Gráfica de línea (SVG puro, sin dependencias externas) ========================================================================== */ .line-chart-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .line-chart-type-select { width: auto; max-width: 8.5rem; margin-left: auto; } .line-chart-total { font-size: 1.6rem; font-weight: 700; color: var(--kratos-heading); } .line-chart-row { display: flex; gap: 0.6rem; } .line-chart-y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.72rem; color: var(--kratos-text-muted); text-align: right; padding: 0.1rem 0; min-width: 2.5rem; } .line-chart-plot { flex: 1 1 auto; min-width: 0; } .line-chart-svg { width: 100%; height: 200px; display: block; overflow: visible; } .line-chart-grid { stroke: var(--kratos-border); stroke-width: 1; } .line-chart-axis-base { stroke: var(--kratos-text-muted); stroke-width: 1.5; } .line-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(99 102 241 / 0.25)); } .line-chart-dot { fill: var(--kratos-surface); stroke-width: 2.5; transition: r 0.12s ease, stroke-width 0.12s ease; } .line-chart-dot:hover { r: 6; stroke-width: 3.5; } .line-chart-bar { transition: opacity 0.12s ease; } .line-chart-bar:hover { opacity: 0.82; } .line-chart-pie-arc { transition: stroke-width 0.12s ease, opacity 0.12s ease; cursor: default; } .line-chart-pie-arc:hover { opacity: 0.85; } .line-chart-value-label { font-size: 9px; fill: var(--kratos-text-muted); font-weight: 600; pointer-events: none; } .line-chart-x-axis { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--kratos-text-muted); margin-top: 0.4rem; } .line-chart-pie-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .line-chart-pie-svg { width: 200px; height: 200px; flex: 0 0 auto; } .line-chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; flex: 1 1 auto; min-width: 0; } .line-chart-legend li { display: flex; align-items: center; gap: 0.5rem; } .line-chart-legend-swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto; transition: transform 0.12s ease; } .line-chart-legend-item:hover .line-chart-legend-swatch { transform: scale(1.35); } .line-chart-legend-item:hover .line-chart-legend-label { font-weight: 600; } .line-chart-legend-label { color: var(--kratos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-chart-legend-value { margin-left: auto; color: var(--kratos-text-muted); white-space: nowrap; } .period-filter { width: auto; display: inline-block; } /* ========================================================================== Selector de módulos (SelectorModulos.razor) -- tarjetas con interruptor en vez de los checkboxes planos de antes. Un módulo con varias secciones (Contabilidad, Negocio) tiene un interruptor maestro que prende/apaga todas sus secciones a la vez, más un interruptor independiente por sección debajo. ========================================================================== */ .modulos-selector { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .modulo-card { background: var(--kratos-surface); border: 1px solid var(--kratos-border); border-radius: 0.75rem; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .modulo-card:hover { border-color: var(--kratos-gold-dark); box-shadow: 0 2px 10px rgba(9, 20, 38, 0.06); } .modulo-card-header { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1.1rem; } .modulo-card-header > div:not(.form-check) { flex: 1 1 auto; min-width: 0; } .modulo-card-icon { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; opacity: 0.85; } .modulo-card-title { font-weight: 600; color: var(--kratos-heading); display: flex; align-items: center; gap: 0.5rem; } .modulo-card-subtitle { font-size: 0.82rem; color: var(--kratos-text-muted); } .modulo-badge-parcial { background: var(--kratos-gold); color: var(--kratos-navy-deep); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; } .modulo-switch { flex: 0 0 auto; margin: 0; padding: 0; min-height: 0; } .modulo-switch .form-check-input { width: 2.75em; height: 1.5em; cursor: pointer; } .modulo-card-secciones { border-top: 1px solid var(--kratos-border); background: var(--kratos-bg); padding: 0.4rem 1.1rem; } .modulo-seccion { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; } .modulo-seccion + .modulo-seccion { border-top: 1px dashed var(--kratos-border); } .modulo-seccion-icon { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; opacity: 0.7; } .modulo-seccion-nombre { flex: 1 1 auto; font-size: 0.9rem; color: var(--kratos-text); } .modulo-card-permiso { border-color: var(--kratos-gold-dark); background: color-mix(in srgb, var(--kratos-gold) 6%, var(--kratos-surface)); }