:root { --tblr-primary: #206bc4; } /* Fondo de página un tono más oscuro que el blanco de las tarjetas (gray-100/200 de Tabler), así las cards se despegan del fondo en vez de fundirse casi al mismo blanco. Solo aplica en modo claro: en oscuro, Tabler ya resuelve --tblr-body-bg a gray-900 y --tblr-bg-surface (cards/sidebar) a gray-800, que es la separación de tono correcta — pisarla aquí con un valor fijo rompería el contraste calculado del tema oscuro. */ html:not([data-bs-theme="dark"]) { --tblr-body-bg: #eef1f6; } /* Tabler referencia la familia "Inter" pero no la trae empaquetada; sin cargarla, el navegador cae a fuentes del sistema (Segoe UI en Windows) que no calzan con el peso/tracking que Tabler calculó para Inter, y el texto se ve "pesado"/borroso en comparación. Se carga en el (ver header_start.php / login.php) vía Google Fonts; aquí solo se asegura el fallback correcto. */ html { font-family: 'Inter', var(--tblr-font-sans-serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Marca ---------- */ .navbar-brand i { color: var(--tblr-primary); } /* ---------- Efectos ---------- */ .card { transition: box-shadow .2s ease, transform .2s ease; } .card-link-hover:hover, a.card:hover { box-shadow: 0 .5rem 1.5rem rgba(31, 41, 55, .12); transform: translateY(-2px); } .btn, .nav-link, .dropdown-item, .badge-estado { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } .table tbody tr { transition: background-color .1s ease; } /* ---------- Sidebar colapsable en escritorio (no viene de fábrica en Tabler core) ---------- Tabler fija el ancho de .navbar-vertical y el margin-left de .navbar/.page-wrapper a 15rem con un valor literal (no una variable CSS), así que hay que pisar ambos lados a la vez. */ @media (min-width: 992px) { body.dlc-sidebar-collapsed .navbar-expand-lg.navbar-vertical { width: 4.75rem; } body.dlc-sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .navbar, body.dlc-sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: 4.75rem; } } body.dlc-sidebar-collapsed .navbar-vertical .nav-link-title, body.dlc-sidebar-collapsed .navbar-vertical .dlc-brand-text, body.dlc-sidebar-collapsed .navbar-vertical .dropdown-menu, body.dlc-sidebar-collapsed .navbar-vertical .dropdown-toggle::after { display: none; } body.dlc-sidebar-collapsed .navbar-vertical .nav-link { justify-content: center; } body.dlc-sidebar-collapsed .navbar-vertical .container-fluid { padding-left: .5rem; padding-right: .5rem; } body.dlc-sidebar-collapsed #dlcCollapseToggle i { transition: transform .2s ease; transform: rotate(180deg); } /* Indicador de "página activa" en el menú. Tabler trae su propio mecanismo (.nav-item.active:after con una barra lateral), pero no se estaba pintando de forma confiable en la cascada real del sitio, así que se define explícito aquí: fondo tenue + borde de color a la izquierda + texto en negritas. Funciona igual con el sidebar colapsado a solo íconos (el borde sigue visible aunque no haya texto). */ .navbar-vertical .nav-link.active { background: rgba(255, 255, 255, .08); border-left: 3px solid var(--tblr-primary); padding-left: calc(1rem - 3px); font-weight: 600; color: #fff; } .navbar-vertical .nav-link.active .nav-link-icon { color: var(--tblr-primary); } .navbar-vertical .dropdown-menu .dropdown-item.active { background: var(--tblr-primary-lt); color: var(--tblr-primary-text-emphasis); font-weight: 600; } /* ---------- Badges de estado del convenio (centralizado) ---------- */ /* -text-emphasis es el token que Tabler ya calcula específicamente para texto legible sobre un fondo -lt/subtle del mismo color, con variantes propias para claro y oscuro (más clara en oscuro, más oscura en claro) — así el badge no pierde contraste al cambiar de tema. */ .badge-estado { font-weight: 600; } .badge-estado-secondary { background: var(--tblr-secondary-lt); color: var(--tblr-secondary-text-emphasis); } .badge-estado-warning { background: var(--tblr-warning-lt); color: var(--tblr-warning-text-emphasis); } .badge-estado-danger { background: var(--tblr-danger-lt); color: var(--tblr-danger-text-emphasis); } .badge-estado-info { background: var(--tblr-info-lt); color: var(--tblr-info-text-emphasis); } .badge-estado-primary { background: var(--tblr-primary-lt); color: var(--tblr-primary-text-emphasis); } .badge-estado-success { background: var(--tblr-success-lt); color: var(--tblr-success-text-emphasis); } .badge-estado-dark { background: var(--tblr-dark-lt); color: var(--tblr-body-color); } /* ---------- Timeline del convenio ---------- */ .dlc-timeline { position: relative; padding-left: 1.75rem; } .dlc-timeline::before { content: ''; position: absolute; left: .4rem; top: .3rem; bottom: .3rem; width: 2px; background: var(--tblr-border-color); } .dlc-timeline-item { position: relative; padding-bottom: 1.25rem; } .dlc-timeline-item::before { content: ''; position: absolute; left: -1.75rem; top: .15rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--tblr-primary); border: 2px solid var(--tblr-bg-surface); box-shadow: 0 0 0 2px var(--tblr-primary); } .dlc-timeline-item .t-meta { font-size: .78rem; color: var(--tblr-secondary); } .dlc-timeline-item .t-desc { font-weight: 600; } .dlc-timeline-item .t-obs { font-size: .88rem; color: var(--tblr-body-color); } /* ---------- Checklist de cierre ---------- */ .dlc-checklist-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--tblr-border-color); } .dlc-checklist-item:last-child { border-bottom: none; } .dlc-checklist-icon { font-size: 1.1rem; margin-top: .1rem; } .dlc-checklist-icon.done { color: var(--tblr-success); } .dlc-checklist-icon.pending { color: var(--tblr-secondary); } /* ---------- Login ---------- */ .dlc-auth-bg { min-height: 100vh; background: linear-gradient(135deg, #0b2545, var(--tblr-primary)); display: flex; align-items: center; } /* ---------- Llamado de atención (revisar documento antes de decidir) ---------- */ @keyframes dlc-pulse { 0% { box-shadow: 0 0 0 0 rgba(32, 107, 196, .5); } 70% { box-shadow: 0 0 0 10px rgba(32, 107, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(32, 107, 196, 0); } } .dlc-pulse { animation: dlc-pulse 1.8s infinite; } .dlc-pulse:hover { animation-play-state: paused; }