/* ============================================================================= Alegra-inspired theme for Velzon portal (GFACE / DTE SV) ----------------------------------------------------------------------------- Diseno inspirado en Alegra Facturacion Electronica: - Paleta verde-teal (#00B19D) con tintes suaves. - Cards con sombra suave + radio 14px. - Tablas con cabecera tinted y uppercase tracking. - Inputs con focus glow primario. - Sidebar blanco con accent verde lateral en item activo. - Tipografia Inter (system fallback). - Animaciones fadeUp progresivas por seccion. ACTIVACION: (ver _Layout.cshtml). ROLLBACK (3 niveles, de mas a menos suave): 1) Quitar data-theme="alegra" de en _Layout.cshtml. 2) Comentar el de alegra-theme.css en _head_css.cshtml. 3) Restaurar archivos desde wwwroot/assets/backup-theme-20260525/. ============================================================================= */ /* ---------- Tipografia (Inter) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); html[data-theme="alegra"] { /* Brand */ --alg-primary: #00b19d; --alg-primary-600: #009b8a; --alg-primary-700: #00826f; --alg-primary-100: #d6f3ee; --alg-primary-50: #ecf9f6; --alg-info: #0ea5e9; --alg-info-50: #e5f4fc; --alg-success: #10b981; --alg-success-50: #e6f7f1; --alg-warning: #f59e0b; --alg-warning-50: #fdf3e0; --alg-danger: #ef4444; --alg-danger-50: #fde8e8; --alg-violet: #7c3aed; /* Surfaces & text */ --alg-bg: #f5f7fb; --alg-surface: #ffffff; --alg-surface-2: #f8fafc; --alg-border: #e4e9f0; --alg-border-soft: #eef1f6; --alg-text: #1e2a3b; --alg-text-muted: #6b7a90; --alg-text-soft: #94a2b6; /* Shadows */ --alg-shadow-sm: 0 1px 2px rgba(15,23,42,.04); --alg-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px -8px rgba(15,23,42,.08); --alg-shadow-lg: 0 4px 12px rgba(15,23,42,.08), 0 18px 36px -14px rgba(15,23,42,.14); /* Radii */ --alg-radius-sm: 6px; --alg-radius-md: 10px; --alg-radius-lg: 14px; --alg-radius-xl: 18px; /* Hijack de variables Velzon: heredan todos los componentes existentes */ --vz-primary: var(--alg-primary); --vz-primary-rgb: 0, 177, 157; --vz-link-color: var(--alg-primary-600); --vz-link-hover-color: var(--alg-primary-700); --vz-body-bg: var(--alg-bg); --vz-body-color: var(--alg-text); --vz-heading-color: var(--alg-text); --vz-border-color: var(--alg-border); --vz-card-bg: var(--alg-surface); --vz-card-cap-bg: var(--alg-surface); --vz-vertical-menu-bg: var(--alg-surface); --vz-vertical-menu-item-color: var(--alg-text-muted); --vz-vertical-menu-item-hover-color: var(--alg-primary); --vz-vertical-menu-item-active-color: var(--alg-primary); --vz-vertical-menu-sub-item-color: var(--alg-text-soft); --vz-vertical-menu-sub-item-hover-color: var(--alg-primary); --vz-vertical-menu-sub-item-active-color: var(--alg-primary); --vz-vertical-menu-title-color: var(--alg-text-soft); --vz-header-bg: var(--alg-surface); --vz-topbar-search-bg: var(--alg-surface-2); --vz-topbar-user-bg: var(--alg-surface-2); --vz-input-bg: var(--alg-surface); --vz-input-border: var(--alg-border); --vz-input-focus-border: var(--alg-primary); --vz-input-disabled-bg: var(--alg-surface-2); --vz-input-group-addon-bg: var(--alg-surface-2); --vz-dropdown-bg: var(--alg-surface); --vz-dropdown-link-hover-bg: var(--alg-primary-50); --vz-dropdown-link-hover-color: var(--alg-primary-700); --vz-list-group-hover-bg: var(--alg-primary-50); --vz-pagination-hover-bg: var(--alg-primary-50); --vz-accordion-button-active-color: var(--alg-primary); --vz-progress-bg: var(--alg-border-soft); --vz-nav-tabs-link-active-color: var(--alg-primary); --vz-nav-tabs-link-active-bg: var(--alg-surface); --vz-footer-bg: var(--alg-surface); --vz-footer-color: var(--alg-text-soft); } /* ============================================================================ BASE ============================================================================ */ html[data-theme="alegra"] body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--alg-text); background: var(--alg-bg); } html[data-theme="alegra"] h1, html[data-theme="alegra"] h2, html[data-theme="alegra"] h3, html[data-theme="alegra"] h4, html[data-theme="alegra"] h5, html[data-theme="alegra"] h6, html[data-theme="alegra"] .h1, html[data-theme="alegra"] .h2, html[data-theme="alegra"] .h3, html[data-theme="alegra"] .h4, html[data-theme="alegra"] .h5, html[data-theme="alegra"] .h6 { font-weight: 600; letter-spacing: -0.015em; color: var(--alg-text); } html[data-theme="alegra"] a { text-decoration: none; transition: color .15s ease; } html[data-theme="alegra"] hr, html[data-theme="alegra"] .border, html[data-theme="alegra"] .border-top, html[data-theme="alegra"] .border-bottom, html[data-theme="alegra"] .border-start, html[data-theme="alegra"] .border-end { border-color: var(--alg-border-soft) !important; } /* ============================================================================ CARDS ============================================================================ */ html[data-theme="alegra"] .card { border: 0; background: var(--alg-surface); border-radius: var(--alg-radius-lg); box-shadow: var(--alg-shadow); transition: transform .18s ease, box-shadow .18s ease; } html[data-theme="alegra"] .card.card-animate, html[data-theme="alegra"] .card[data-card-hover="true"] { cursor: default; } html[data-theme="alegra"] .card.card-animate:hover, html[data-theme="alegra"] .card[data-card-hover="true"]:hover { transform: translateY(-3px); box-shadow: var(--alg-shadow-lg); } html[data-theme="alegra"] .card > .card-header, html[data-theme="alegra"] .card .card-header { background: transparent; border-bottom: 1px solid var(--alg-border-soft); padding: 1rem 1.25rem; font-weight: 600; } html[data-theme="alegra"] .card .card-header .card-title { margin-bottom: 0; font-size: 0.95rem; } html[data-theme="alegra"] .card .card-body { padding: 1.25rem; } html[data-theme="alegra"] .card .card-footer { background: transparent; border-top: 1px solid var(--alg-border-soft); padding: 0.85rem 1.25rem; } /* ============================================================================ BUTTONS ============================================================================ */ html[data-theme="alegra"] .btn { border-radius: var(--alg-radius-md); font-weight: 500; letter-spacing: -0.005em; padding: 0.5rem 1rem; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } html[data-theme="alegra"] .btn:focus, html[data-theme="alegra"] .btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,177,157,.18); outline: 0; } html[data-theme="alegra"] .btn:hover { transform: translateY(-1px); } html[data-theme="alegra"] .btn:active { transform: translateY(0); } html[data-theme="alegra"] .btn:disabled, html[data-theme="alegra"] .btn.disabled { transform: none; opacity: .55; } html[data-theme="alegra"] .btn-primary { background-color: var(--alg-primary); border-color: var(--alg-primary); color: #fff; box-shadow: 0 1px 0 rgba(15,23,42,.05), 0 6px 14px -8px rgba(0,177,157,.55); } html[data-theme="alegra"] .btn-primary:hover, html[data-theme="alegra"] .btn-primary:focus { background-color: var(--alg-primary-600); border-color: var(--alg-primary-600); color: #fff; box-shadow: 0 4px 14px -2px rgba(0,177,157,.45); } html[data-theme="alegra"] .btn-outline-primary { color: var(--alg-primary-600); border-color: var(--alg-primary); background: transparent; } html[data-theme="alegra"] .btn-outline-primary:hover { background: var(--alg-primary); border-color: var(--alg-primary); color: #fff; } html[data-theme="alegra"] .btn-soft-primary { background: var(--alg-primary-50); color: var(--alg-primary-700); border-color: transparent; } html[data-theme="alegra"] .btn-soft-primary:hover { background: var(--alg-primary-100); color: var(--alg-primary-700); } html[data-theme="alegra"] .btn-success { background-color: var(--alg-success); border-color: var(--alg-success); color:#fff; } html[data-theme="alegra"] .btn-success:hover { background-color: #0fa779; border-color: #0fa779; color:#fff; } html[data-theme="alegra"] .btn-danger { background-color: var(--alg-danger); border-color: var(--alg-danger); color:#fff; } html[data-theme="alegra"] .btn-danger:hover { background-color: #dc3030; border-color: #dc3030; color:#fff; } html[data-theme="alegra"] .btn-warning { background-color: var(--alg-warning); border-color: var(--alg-warning); color:#fff; } html[data-theme="alegra"] .btn-warning:hover { background-color: #e08e08; border-color: #e08e08; color:#fff; } html[data-theme="alegra"] .btn-info { background-color: var(--alg-info); border-color: var(--alg-info); color:#fff; } html[data-theme="alegra"] .btn-info:hover { background-color: #0c92cf; border-color: #0c92cf; color:#fff; } html[data-theme="alegra"] .btn-light { background: var(--alg-surface); border-color: var(--alg-border); color: var(--alg-text); } html[data-theme="alegra"] .btn-light:hover { background: var(--alg-surface-2); border-color: var(--alg-border); color: var(--alg-text); } html[data-theme="alegra"] .btn-icon, html[data-theme="alegra"] .btn-sm { border-radius: var(--alg-radius-sm); } /* Spinner alineado en botones */ html[data-theme="alegra"] .btn .spinner-border-sm, html[data-theme="alegra"] .btn .spinner-border { vertical-align: -0.18em; } /* ============================================================================ INPUTS / FORMS ============================================================================ */ html[data-theme="alegra"] .form-control, html[data-theme="alegra"] .form-select { border-radius: var(--alg-radius-md); border-color: var(--alg-border); padding: 0.5rem 0.875rem; font-size: 0.9rem; background-color: var(--alg-surface); color: var(--alg-text); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } html[data-theme="alegra"] .form-control::placeholder { color: var(--alg-text-soft); } html[data-theme="alegra"] .form-control:focus, html[data-theme="alegra"] .form-select:focus { border-color: var(--alg-primary); box-shadow: 0 0 0 4px rgba(0,177,157,.15); background-color: var(--alg-surface); color: var(--alg-text); } html[data-theme="alegra"] .form-control:disabled, html[data-theme="alegra"] .form-control[readonly] { background-color: var(--alg-surface-2); color: var(--alg-text-muted); } html[data-theme="alegra"] .form-control-sm, html[data-theme="alegra"] .form-select-sm { border-radius: var(--alg-radius-sm); padding: .35rem .65rem; font-size: .825rem; } html[data-theme="alegra"] .form-control-lg, html[data-theme="alegra"] .form-select-lg { border-radius: var(--alg-radius-md); padding: .75rem 1rem; font-size: 1rem; } html[data-theme="alegra"] .form-label { font-size: 0.825rem; font-weight: 500; color: var(--alg-text-muted); margin-bottom: 0.375rem; } html[data-theme="alegra"] .input-group .form-control, html[data-theme="alegra"] .input-group .form-select { box-shadow: none; } html[data-theme="alegra"] .input-group-text { background: var(--alg-surface-2); border-color: var(--alg-border); color: var(--alg-text-muted); border-radius: var(--alg-radius-md); } html[data-theme="alegra"] .form-check-input { border-radius: 4px; border-color: var(--alg-border); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } html[data-theme="alegra"] .form-check-input:checked { background-color: var(--alg-primary); border-color: var(--alg-primary); } html[data-theme="alegra"] .form-check-input:focus { box-shadow: 0 0 0 4px rgba(0,177,157,.18); border-color: var(--alg-primary); } html[data-theme="alegra"] .form-switch .form-check-input { border-radius: 999px; } /* ============================================================================ TABLES ============================================================================ */ html[data-theme="alegra"] .table { --bs-table-bg: var(--alg-surface); color: var(--alg-text); border-color: var(--alg-border-soft); margin-bottom: 0; } html[data-theme="alegra"] .table > :not(caption) > * > * { padding: 0.75rem 0.85rem; border-bottom-color: var(--alg-border-soft); vertical-align: middle; } html[data-theme="alegra"] .table > thead { background: var(--alg-surface-2); } html[data-theme="alegra"] .table > thead > tr > th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--alg-text-muted); border-bottom: 1px solid var(--alg-border); white-space: nowrap; } html[data-theme="alegra"] .table-hover > tbody > tr { transition: background-color .15s ease; } html[data-theme="alegra"] .table-hover > tbody > tr:hover { background-color: var(--alg-primary-50); --bs-table-accent-bg: var(--alg-primary-50); } html[data-theme="alegra"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--alg-surface-2); } html[data-theme="alegra"] .table-bordered { border-color: var(--alg-border-soft); } html[data-theme="alegra"] .table-borderless > :not(caption) > * > * { border-bottom: 0; } /* DataTables (Velzon usa gridjs/datatables; aplicamos a ambos) */ html[data-theme="alegra"] .dataTables_wrapper .dataTables_filter input, html[data-theme="alegra"] .dataTables_wrapper .dataTables_length select { border-radius: var(--alg-radius-md); border-color: var(--alg-border); } html[data-theme="alegra"] .gridjs-table { background: var(--alg-surface); } html[data-theme="alegra"] .gridjs-th { background: var(--alg-surface-2) !important; color: var(--alg-text-muted) !important; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; } html[data-theme="alegra"] .gridjs-td { border-bottom: 1px solid var(--alg-border-soft) !important; } /* ============================================================================ BADGES ============================================================================ */ html[data-theme="alegra"] .badge { font-weight: 600; letter-spacing: 0.02em; padding: 0.35em 0.65em; border-radius: 999px; font-size: .72rem; } html[data-theme="alegra"] .bg-primary { background-color: var(--alg-primary) !important; } html[data-theme="alegra"] .bg-success { background-color: var(--alg-success) !important; } html[data-theme="alegra"] .bg-warning { background-color: var(--alg-warning) !important; color:#fff; } html[data-theme="alegra"] .bg-danger { background-color: var(--alg-danger) !important; } html[data-theme="alegra"] .bg-info { background-color: var(--alg-info) !important; } html[data-theme="alegra"] .badge.bg-primary-subtle, html[data-theme="alegra"] .bg-primary-subtle { background: var(--alg-primary-50) !important; color: var(--alg-primary-700) !important; } html[data-theme="alegra"] .badge.bg-success-subtle, html[data-theme="alegra"] .bg-success-subtle { background: var(--alg-success-50) !important; color: #047857 !important; } html[data-theme="alegra"] .badge.bg-warning-subtle, html[data-theme="alegra"] .bg-warning-subtle { background: var(--alg-warning-50) !important; color: #b45309 !important; } html[data-theme="alegra"] .badge.bg-danger-subtle, html[data-theme="alegra"] .bg-danger-subtle { background: var(--alg-danger-50) !important; color: #b91c1c !important; } html[data-theme="alegra"] .badge.bg-info-subtle, html[data-theme="alegra"] .bg-info-subtle { background: var(--alg-info-50) !important; color: #075985 !important; } html[data-theme="alegra"] .text-primary { color: var(--alg-primary-700) !important; } html[data-theme="alegra"] .text-success { color: #047857 !important; } html[data-theme="alegra"] .text-warning { color: #b45309 !important; } html[data-theme="alegra"] .text-danger { color: #b91c1c !important; } html[data-theme="alegra"] .text-info { color: #075985 !important; } html[data-theme="alegra"] .text-muted { color: var(--alg-text-muted) !important; } /* ============================================================================ SIDEBAR (vertical menu) ============================================================================ */ html[data-theme="alegra"] .app-menu.navbar-menu, html[data-theme="alegra"] .navbar-menu { background: var(--alg-surface); border-right: 1px solid var(--alg-border-soft); } html[data-theme="alegra"] .navbar-brand-box { background: var(--alg-surface); border-bottom: 1px solid var(--alg-border-soft); } html[data-theme="alegra"] .navbar-menu .navbar-nav .nav-link { border-radius: var(--alg-radius-md); margin: 2px 10px; padding: 0.55rem 0.85rem; color: var(--alg-text-muted); font-weight: 500; font-size: .875rem; transition: background-color .15s ease, color .15s ease; } html[data-theme="alegra"] .navbar-menu .navbar-nav .nav-link i, html[data-theme="alegra"] .navbar-menu .navbar-nav .nav-link svg { transition: color .15s ease; } html[data-theme="alegra"] .navbar-menu .navbar-nav .nav-link:hover { background: var(--alg-primary-50); color: var(--alg-primary-700); } html[data-theme="alegra"] .navbar-menu .navbar-nav .nav-link.active { background: var(--alg-primary-50); color: var(--alg-primary-700); font-weight: 600; position: relative; } html[data-theme="alegra"] .navbar-menu .navbar-nav .nav-link.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--alg-primary); } html[data-theme="alegra"] .navbar-menu .menu-title, html[data-theme="alegra"] .menu-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 600; color: var(--alg-text-soft); padding: 0.85rem 1.25rem 0.35rem; } /* ============================================================================ TOPBAR ============================================================================ */ html[data-theme="alegra"] #page-topbar { background: var(--alg-surface); border-bottom: 1px solid var(--alg-border-soft); box-shadow: none; transition: box-shadow .2s ease; } html[data-theme="alegra"] #page-topbar.topbar-shadow { box-shadow: 0 4px 12px -4px rgba(15,23,42,.10); } html[data-theme="alegra"] .header-item, html[data-theme="alegra"] .topbar-user .btn { border-radius: var(--alg-radius-md); } html[data-theme="alegra"] .topbar-user .btn:hover { background: var(--alg-surface-2); } html[data-theme="alegra"] .app-search .form-control { background: var(--alg-surface-2); border-color: transparent; border-radius: var(--alg-radius-md); } html[data-theme="alegra"] .app-search .form-control:focus { background: var(--alg-surface); border-color: var(--alg-primary); } /* ============================================================================ PAGE CONTENT ============================================================================ */ html[data-theme="alegra"] .page-content { padding: calc(70px + 1.5rem) 0 4rem; } html[data-theme="alegra"] .page-content > .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; } html[data-theme="alegra"] .page-title-box { padding: .25rem 0 1.25rem; } html[data-theme="alegra"] .page-title-box h4 { font-weight: 600; font-size: 1.25rem; margin-bottom: 0; } html[data-theme="alegra"] .page-title-box .breadcrumb { margin-bottom: 0; font-size: .8rem; } html[data-theme="alegra"] .page-title-box .breadcrumb-item a { color: var(--alg-text-muted); } html[data-theme="alegra"] .page-title-box .breadcrumb-item.active { color: var(--alg-primary-700); } /* ============================================================================ DROPDOWN / MODAL / TOAST / ALERT / TABS ============================================================================ */ html[data-theme="alegra"] .dropdown-menu { border-radius: var(--alg-radius-md); box-shadow: var(--alg-shadow-lg); border: 1px solid var(--alg-border-soft); padding: .35rem; } html[data-theme="alegra"] .dropdown-item { border-radius: var(--alg-radius-sm); padding: .45rem .65rem; font-size: .875rem; } html[data-theme="alegra"] .dropdown-item:hover, html[data-theme="alegra"] .dropdown-item:focus { background: var(--alg-primary-50); color: var(--alg-primary-700); } html[data-theme="alegra"] .dropdown-divider { border-color: var(--alg-border-soft); } html[data-theme="alegra"] .modal-content { border: 0; border-radius: var(--alg-radius-xl); box-shadow: var(--alg-shadow-lg); overflow: hidden; } html[data-theme="alegra"] .modal-header { border-bottom: 1px solid var(--alg-border-soft); padding: 1rem 1.25rem; } html[data-theme="alegra"] .modal-footer { border-top: 1px solid var(--alg-border-soft); padding: .85rem 1.25rem; } html[data-theme="alegra"] .modal-backdrop.show { opacity: .35; } html[data-theme="alegra"] .alert { border: 0; border-radius: var(--alg-radius-md); border-left: 4px solid currentColor; padding: .85rem 1rem; } html[data-theme="alegra"] .alert-primary { background: var(--alg-primary-50); color: var(--alg-primary-700); } html[data-theme="alegra"] .alert-success { background: var(--alg-success-50); color: #047857; } html[data-theme="alegra"] .alert-warning { background: var(--alg-warning-50); color: #b45309; } html[data-theme="alegra"] .alert-danger { background: var(--alg-danger-50); color: #b91c1c; } html[data-theme="alegra"] .alert-info { background: var(--alg-info-50); color: #075985; } html[data-theme="alegra"] .toast { border-radius: var(--alg-radius-md); border: 1px solid var(--alg-border-soft); box-shadow: var(--alg-shadow-lg); } html[data-theme="alegra"] .nav-tabs { border-bottom: 1px solid var(--alg-border-soft); gap: .25rem; } html[data-theme="alegra"] .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--alg-text-muted); border-radius: 0; font-weight: 500; padding: .65rem 1rem; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } html[data-theme="alegra"] .nav-tabs .nav-link:hover { color: var(--alg-primary-700); background: transparent; border-bottom-color: var(--alg-primary-100); } html[data-theme="alegra"] .nav-tabs .nav-link.active { color: var(--alg-primary-700); background: transparent; border-bottom-color: var(--alg-primary); } html[data-theme="alegra"] .nav-pills .nav-link { border-radius: var(--alg-radius-md); color: var(--alg-text-muted); font-weight: 500; } html[data-theme="alegra"] .nav-pills .nav-link.active, html[data-theme="alegra"] .nav-pills .show > .nav-link { background: var(--alg-primary); color: #fff; } /* ============================================================================ PAGINATION ============================================================================ */ html[data-theme="alegra"] .pagination .page-link { color: var(--alg-text); border-color: var(--alg-border-soft); border-radius: var(--alg-radius-sm) !important; margin: 0 2px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } html[data-theme="alegra"] .pagination .page-link:hover { background: var(--alg-primary-50); color: var(--alg-primary-700); border-color: var(--alg-primary-100); } html[data-theme="alegra"] .pagination .page-item.active .page-link { background: var(--alg-primary); border-color: var(--alg-primary); color: #fff; } /* ============================================================================ STAT WIDGETS (cards de KPI dashboard) ============================================================================ */ html[data-theme="alegra"] .card.card-animate .avatar-title, html[data-theme="alegra"] .card .avatar-title.bg-primary-subtle { background: var(--alg-primary-50) !important; color: var(--alg-primary-700) !important; } html[data-theme="alegra"] .card .avatar-title.bg-success-subtle { background: var(--alg-success-50) !important; color: #047857 !important; } html[data-theme="alegra"] .card .avatar-title.bg-warning-subtle { background: var(--alg-warning-50) !important; color: #b45309 !important; } html[data-theme="alegra"] .card .avatar-title.bg-danger-subtle { background: var(--alg-danger-50) !important; color: #b91c1c !important; } html[data-theme="alegra"] .card .avatar-title.bg-info-subtle { background: var(--alg-info-50) !important; color: #075985 !important; } /* ============================================================================ PROGRESS ============================================================================ */ html[data-theme="alegra"] .progress { background: var(--alg-border-soft); border-radius: 999px; overflow: hidden; } html[data-theme="alegra"] .progress-bar { background: var(--alg-primary); border-radius: 999px; } /* ============================================================================ SCROLLBARS (subtle) ============================================================================ */ html[data-theme="alegra"] *::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="alegra"] *::-webkit-scrollbar-track { background: transparent; } html[data-theme="alegra"] *::-webkit-scrollbar-thumb { background: #d6dde7; border: 2px solid var(--alg-bg); border-radius: 999px; } html[data-theme="alegra"] *::-webkit-scrollbar-thumb:hover { background: #b8c2d1; } /* ============================================================================ ANIMATIONS ============================================================================ */ @keyframes algFadeUp { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} } @keyframes algFadeIn { from { opacity: 0;} to { opacity: 1;} } @keyframes algPulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.04);} } html[data-theme="alegra"] .page-content > .container-fluid > *:not(.modal) { animation: algFadeUp .38s cubic-bezier(.2,.7,.3,1) both; } html[data-theme="alegra"] .page-content > .container-fluid > *:not(.modal):nth-child(1) { animation-delay: 0ms; } html[data-theme="alegra"] .page-content > .container-fluid > *:not(.modal):nth-child(2) { animation-delay: 50ms; } html[data-theme="alegra"] .page-content > .container-fluid > *:not(.modal):nth-child(3) { animation-delay: 100ms; } html[data-theme="alegra"] .page-content > .container-fluid > *:not(.modal):nth-child(4) { animation-delay: 150ms; } html[data-theme="alegra"] .page-content > .container-fluid > *:not(.modal):nth-child(5) { animation-delay: 200ms; } html[data-theme="alegra"] .dropdown-menu.show { animation: algFadeIn .15s ease-out both; } html[data-theme="alegra"] .toast.show { animation: algFadeUp .22s cubic-bezier(.2,.7,.3,1) both; } @media (prefers-reduced-motion: reduce) { html[data-theme="alegra"] *, html[data-theme="alegra"] *::before, html[data-theme="alegra"] *::after { animation: none !important; transition: none !important; } } /* ============================================================================ AUTH / LOGIN PAGE (mejora visual del login) ============================================================================ */ html[data-theme="alegra"] .auth-page-wrapper .auth-bg-cover { background: linear-gradient(135deg, var(--alg-primary) 0%, var(--alg-primary-700) 100%) !important; } html[data-theme="alegra"] .auth-page-wrapper .card { border-radius: var(--alg-radius-xl); } /* ============================================================================ UTIL: contenedor "panel-toolbar" para filtros/acciones (uso opcional) ============================================================================ */ html[data-theme="alegra"] .alg-toolbar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: var(--alg-surface); border: 1px solid var(--alg-border-soft); border-radius: var(--alg-radius-md); box-shadow: var(--alg-shadow-sm); } html[data-theme="alegra"] .alg-toolbar .alg-toolbar-title { font-weight: 600; color: var(--alg-text); margin-right: auto; }