/* ==========================================================================
   SISTEMA DE MESA DE PARTES DIGITAL - UGEL BOLOGNESI
   Diseño UI Moderno, Ejecutivo, Pulcro e Institucional (v2.1)
   ========================================================================== */

:root {
    --ugelb-navy: #061f4a;
    --ugelb-blue: #0b3d91;
    --ugelb-blue-mid: #1453b8;
    --ugelb-cyan: #0284c7;
    --ugelb-gold: #f59e0b;
    --ugelb-gold-bright: #fbbf24;
    --ugelb-green: #16a34a;
    --ugelb-purple: #9333ea;
    --ugelb-bg: #f1f5f9;
    --ugelb-surface: #ffffff;
    --ugelb-text: #0f172a;
    --ugelb-muted: #475569;
    --ugelb-border: #e2e8f0;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--ugelb-bg);
    color: var(--ugelb-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Franja Tricolor Oficial Provincia de Bolognesi (Animada como indicador de carga institucional) */
.bolognesi-top-bar {
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg,
        #16a34a 0%, #16a34a 33.33%,
        #ffffff 33.33%, #ffffff 66.66%,
        #9333ea 66.66%, #9333ea 100%);
    position: relative;
    overflow: hidden;
    z-index: 1060;
}

.bolognesi-runner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, #fde047 50%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0 0 10px rgba(253, 224, 71, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.bolognesi-runner.active {
    opacity: 1;
}

.bolognesi-runner.finish {
    width: 100% !important;
    opacity: 0;
    transition: width 0.15s ease-out, opacity 0.25s ease-out 0.1s;
}

.bolognesi-top-bar.is-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), #fbbf24, transparent);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.9);
    animation: bolognesiGlowSweep 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes bolognesiGlowSweep {
    0% { left: -50%; }
    100% { left: 130%; }
}

/* Barra Institucional Superior */
.topbar-institucional {
    background-color: #041533;
    color: #cbd5e1;
    font-size: 0.8rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Navbar Principal Sólida y Moderna (Siempre en capa superior al hacer scroll) */
.navbar-ugelb {
    background-color: #072354 !important;
    background-image: linear-gradient(135deg, #061f4a 0%, #0b3d91 65%, #0e4da8 100%) !important;
    box-shadow: 0 6px 24px rgba(6, 31, 74, 0.28);
    border-bottom: 3px solid var(--ugelb-gold);
    padding: 0.65rem 0;
    position: sticky;
    top: 0;
    z-index: 1050 !important;
}

/* Cabecera institucional para tarjetas (sin z-index elevado para no colisionar con el navbar) */
.card-header-ugelb {
    background-color: #072354 !important;
    background-image: linear-gradient(135deg, #061f4a 0%, #0b3d91 65%, #0e4da8 100%) !important;
    border-bottom: 3px solid var(--ugelb-gold) !important;
    color: #ffffff !important;
    position: relative;
    z-index: 1;
}

.auth-page-wrapper {
    min-height: calc(100vh - 170px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    width: 52px;
    height: 52px;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}

.brand-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.brand-logo-img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.45));
}

.brand-logo-sm {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    border: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    flex-shrink: 0;
}

/* Enlaces del Navbar */
.navbar-ugelb .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.55rem 1.05rem !important;
    border-radius: 50rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.navbar-ugelb .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.14);
}

.navbar-ugelb .navbar-nav .nav-link.active {
    color: #061f4a !important;
    background-color: var(--ugelb-gold-bright) !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(251, 191, 36, 0.35);
}

/* Botón de Acceso a Funcionarios en Navbar */
.btn-acceso-funcionarios {
    background: #ffffff;
    color: #061f4a !important;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.55rem 1.2rem;
    border-radius: 50rem;
    border: 2px solid var(--ugelb-gold-bright);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-acceso-funcionarios:hover {
    background: var(--ugelb-gold-bright);
    color: #061f4a !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
}

/* Hero Principal del Portal Público */
.hero-ugelb {
    background-color: #072354;
    background-image:
        radial-gradient(circle at 85% 20%, rgba(251, 191, 36, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 15% 80%, rgba(2, 132, 199, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #05193d 0%, #0b3d91 60%, #0369a1 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid var(--ugelb-gold);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.4rem 1rem;
    border-radius: 50rem;
    font-size: 0.82rem;
    color: #f8fafc;
}

/* Tarjetas Institucionales */
.card-institucional {
    background: var(--ugelb-surface);
    border: 1px solid var(--ugelb-border);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

/* Botones de Acción Principal */
.btn-ugelb {
    background-color: #0b3d91;
    background-image: linear-gradient(135deg, #0b3d91 0%, #062356 100%);
    color: #ffffff !important;
    border: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-ugelb:hover, .btn-ugelb:focus {
    background-image: linear-gradient(135deg, #1453b8 0%, #0b3d91 100%);
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(11, 61, 145, 0.32);
    transform: translateY(-1px);
}

.btn-ugelb-gold {
    background-color: #fbbf24;
    background-image: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    color: #061f4a !important;
    border: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-ugelb-gold:hover, .btn-ugelb-gold:focus {
    background-image: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #061f4a !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

/* Badges de Estado */
.badge-estado {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.42em 0.85em;
    border-radius: 50rem;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
}

/* Stepper Horizontal de Seguimiento */
.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 1.75rem 0 1rem;
}

.stepper-wrapper::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 10%;
    right: 10%;
    height: 4px;
    background: #e2e8f0;
    z-index: 1;
    border-radius: 4px;
}

.stepper-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}

.step-counter {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    transition: all 0.25s ease;
}

.stepper-item.completed .step-counter {
    background: var(--ugelb-blue);
    border-color: var(--ugelb-blue);
    color: #ffffff;
}

.stepper-item.active .step-counter {
    background: var(--ugelb-gold-bright);
    border-color: var(--ugelb-navy);
    color: var(--ugelb-navy);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25);
    font-weight: 800;
}

.stepper-item.observado .step-counter {
    background: #dc2626;
    border-color: #991b1b;
    color: #ffffff;
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.2);
}

.step-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.stepper-item.active .step-name,
.stepper-item.completed .step-name {
    color: var(--ugelb-navy);
    font-weight: 700;
}

/* Línea de Tiempo Vertical (Timeline) */
.timeline-ugelb {
    position: relative;
    padding-left: 2.5rem;
    margin: 0;
    list-style: none;
}

.timeline-ugelb-line {
    position: absolute;
    left: 16px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: linear-gradient(180deg, var(--ugelb-blue) 0%, #cbd5e1 100%);
    border-radius: 3px;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.4rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -2.5rem;
    top: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--ugelb-blue);
    color: var(--ugelb-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.timeline-item.marker-success .timeline-marker {
    border-color: #16a34a;
    background: #dcfce7;
    color: #15803d;
}

.timeline-item.marker-danger .timeline-marker {
    border-color: #dc2626;
    background: #fee2e2;
    color: #b91c1c;
}

.timeline-item.marker-warning .timeline-marker {
    border-color: #d97706;
    background: #fef3c7;
    color: #b45309;
}

.timeline-content {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 1rem 1.25rem;
}

/* Layout Administrativo (Sidebar + Main) */
.admin-wrapper {
    display: flex;
    min-height: calc(100vh - 74px);
}

.admin-sidebar {
    width: 270px;
    background-color: #051b40;
    background-image: linear-gradient(180deg, #051b40 0%, #092c66 100%);
    color: #e2e8f0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    padding: 0.75rem 1.1rem;
    border-radius: 0.65rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    transition: all 0.18s ease;
}

.admin-sidebar .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.admin-sidebar .nav-link.active {
    color: #061f4a;
    background: var(--ugelb-gold-bright);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.admin-main {
    flex: 1;
    padding: 1.75rem;
    overflow-x: hidden;
    background-color: #f1f5f9;
}

/* Ficha de Cargo Digital */
.cargo-sheet {
    border: 2px solid var(--ugelb-navy);
    border-radius: 1rem;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.cargo-watermark {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 420px !important;
    height: 420px !important;
    max-width: 80% !important;
    opacity: 0.05 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.cargo-sheet-content {
    position: relative;
    z-index: 1;
}

/* Impresión limpia */
@media print {
    .no-print,
    .navbar-ugelb,
    .topbar-institucional,
    .admin-sidebar,
    .bolognesi-top-bar,
    footer {
        display: none !important;
    }
    body, .admin-main {
        background: #ffffff !important;
        padding: 0 !important;
    }
    .cargo-sheet {
        border: 2px solid #000 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 991.98px) {
    .admin-wrapper {
        flex-direction: column;
    }
    .admin-sidebar {
        width: 100%;
    }
}

/* ==========================================================================
   SISTEMA DE TRANSICIONES Y MICRO-INTERACCIONES ENTERPRISE
   ========================================================================== */

/* 1. Entrada fluida de contenido en cada página (pura opacidad para preservar la funcionalidad y accesibilidad de los modales) */
main.flex-grow-1,
.admin-main,
.auth-page-wrapper {
    animation: enterprisePageEnter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes enterprisePageEnter {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 2. Jerarquía Z-Index prioritaria para Modales y Backdrops de Bootstrap */
.modal-backdrop {
    z-index: 1070 !important;
}
.modal {
    z-index: 1075 !important;
}
.modal-dialog {
    z-index: 1080 !important;
    position: relative;
}

/* 3. Transición entre páginas basada en Skeleton Shimmer (sin pantalla en blanco) */
.page-transition-exit {
    opacity: 1 !important;
    pointer-events: none;
}

/* ==========================================================================
   MOTOR DE SKELETON LOADING CON REFLEJO METÁLICO ANGULAR (115° ALUMINUM SHEEN)
   Siluetas con forma y dimensiones exactas + haz de luz especular diagonal
   ========================================================================== */

@keyframes ugelbAluminumSheen {
    0% {
        background-position: 140% 0;
    }
    100% {
        background-position: -140% 0;
    }
}

/* Base para siluetas estructurales dinámicas (.sk-line, .sk-line-lg, .sk-circle, .sk-pill, .sk-box)
   y para elementos reales transformados en siluetas exactas EXCLUSIVAMENTE durante html.sk-boot .is-skeleton-loading */
.sk-line,
.sk-line-lg,
.sk-circle,
.sk-pill,
.sk-box,
html.sk-boot .is-skeleton-loading :is(
    .sk-bone,
    h1, h2, h3, h4, h5, h6,
    p,
    label.form-label,
    .form-text,
    .hero-badge,
    .input-group,
    .form-control:not(.input-group .form-control),
    .form-select,
    .btn,
    .badge,
    .badge-estado,
    .step-counter,
    .step-name,
    .timeline-marker,
    dt, dd,
    .progress,
    .display-6, .display-5, .display-4,
    div.small:not(:has(*)):not(:empty),
    div.fw-bold:not(:has(*)):not(:empty),
    div.fw-semibold:not(:has(*)):not(:empty),
    div.fw-bolder:not(:has(*)):not(:empty),
    div.text-muted:not(:has(*)):not(:empty),
    div.text-secondary:not(:has(*)):not(:empty),
    span.small:not(:has(*)):not(:empty),
    small:not(:has(*)):not(:empty),
    .table thead th,
    .table tbody td:not(:has(*)):not(:empty),
    .table tbody td > *:not(.d-flex):not(.btn-group):not(form)
) {
    background-color: #d6dee8 !important;
    background-image: linear-gradient(
        115deg,
        #d6dee8 0%,
        #d6dee8 34%,
        #e5ecf4 43%,
        #f8fafc 48.5%,
        #ffffff 50%,
        #f8fafc 51.5%,
        #e5ecf4 57%,
        #d6dee8 66%,
        #d6dee8 100%
    ) !important;
    background-size: 250% 100% !important;
    background-repeat: no-repeat !important;
    animation: ugelbAluminumSheen 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    color: transparent !important;
    border-color: rgba(203, 213, 225, 0.65) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    text-shadow: none !important;
    user-select: none !important;
    pointer-events: none !important;
}

/* Ajustes de geometría exacta para títulos y textos en modo silueta */
html.sk-boot .is-skeleton-loading :is(h1, h2, h3, h4, h5, h6) {
    width: fit-content;
    max-width: 100%;
    border-radius: 0.45rem !important;
}
html.sk-boot .is-skeleton-loading :is(.text-center) > :is(h1, h2, h3, h4, h5, h6) {
    margin-left: auto;
    margin-right: auto;
}
html.sk-boot .is-skeleton-loading :is(
    p,
    label.form-label,
    .form-text,
    dt, dd,
    .step-name,
    .sk-bone,
    div.small:not(:has(*)):not(:empty),
    div.fw-bold:not(:has(*)):not(:empty),
    div.fw-semibold:not(:has(*)):not(:empty),
    div.fw-bolder:not(:has(*)):not(:empty),
    div.text-muted:not(:has(*)):not(:empty),
    div.text-secondary:not(:has(*)):not(:empty),
    span.small:not(:has(*)):not(:empty),
    small:not(:has(*)):not(:empty)
) {
    border-radius: 0.38rem !important;
}
html.sk-boot .is-skeleton-loading .input-group {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

/* Ocultar iconos, textos hijos y placeholders dentro de las siluetas */
html.sk-boot .is-skeleton-loading :is(
    h1, h2, h3, h4, h5, h6,
    p,
    label.form-label,
    .form-text,
    .hero-badge,
    .input-group,
    .form-control,
    .form-select,
    .btn,
    .badge,
    .badge-estado,
    .step-counter,
    .step-name,
    .timeline-marker,
    dt, dd,
    .progress,
    .display-6, .display-5, .display-4,
    div.small:not(:has(*)):not(:empty),
    div.fw-bold:not(:has(*)):not(:empty),
    div.fw-semibold:not(:has(*)):not(:empty),
    div.fw-bolder:not(:has(*)):not(:empty),
    div.text-muted:not(:has(*)):not(:empty),
    div.text-secondary:not(:has(*)):not(:empty),
    span.small:not(:has(*)):not(:empty),
    small:not(:has(*)):not(:empty),
    .table thead th,
    .table tbody td > *:not(.d-flex):not(.btn-group):not(form),
    .sk-bone
) :is(*, ::before, ::after) {
    color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 0 !important;
}

html.sk-boot .is-skeleton-loading :is(.form-control, input, textarea)::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Imágenes / Logos en modo silueta conservando su forma circular o rectangular exacta */
html.sk-boot .is-skeleton-loading img:not(.cargo-watermark) {
    object-position: -99999px -99999px !important;
    background-color: #d6dee8 !important;
    background-image: linear-gradient(
        115deg,
        #d6dee8 0%,
        #d6dee8 34%,
        #e5ecf4 43%,
        #ffffff 50%,
        #e5ecf4 57%,
        #d6dee8 66%,
        #d6dee8 100%
    ) !important;
    background-size: 250% 100% !important;
    animation: ugelbAluminumSheen 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    filter: none !important;
}

/* Cabeceras de tarjetas y tablas suavizadas durante la carga para resaltar las siluetas internas */
html.sk-boot .is-skeleton-loading :is(.card-header, .card-header-ugelb, .modal-header, .table-dark th) {
    background-color: #eef2f7 !important;
    background-image: none !important;
    border-bottom-color: #dde4ee !important;
}

/* Siluetas plateadas sobre el Hero azul oscuro de Inicio (fuera de la tarjeta blanca) */
html.sk-boot .is-skeleton-loading .hero-ugelb :is(h1, p, .hero-badge, .badge, span.small, div.small, .sk-bone, .btn):not(.card *) {
    background-color: rgba(255, 255, 255, 0.16) !important;
    background-image: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.14) 34%,
        rgba(255, 255, 255, 0.28) 43%,
        rgba(255, 255, 255, 0.62) 50%,
        rgba(255, 255, 255, 0.28) 57%,
        rgba(255, 255, 255, 0.14) 66%,
        rgba(255, 255, 255, 0.14) 100%
    ) !important;
    background-size: 250% 100% !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Utilidades de siluetas estructurales para contenedores dinámicos (Fetch / Búsqueda / Seguimiento) */
.sk-line {
    display: block;
    height: 14px;
    border-radius: 6px;
}
.sk-line-lg {
    display: block;
    height: 24px;
    border-radius: 8px;
}
.sk-pill {
    display: inline-block;
    height: 26px;
    border-radius: 50rem;
}
.sk-circle {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
}
.sk-box {
    display: block;
    border-radius: 0.65rem;
}

/* Transición suave al revelar los elementos reales tras el barrido metálico */
.sk-revealed {
    animation: skSmoothReveal 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes skSmoothReveal {
    0% { opacity: 0.92; }
    100% { opacity: 1; }
}

/* 4. Micro-animaciones táctiles en botones y elementos interactivos */
.btn {
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.16s ease, border-color 0.16s ease !important;
}
.btn:active {
    transform: scale(0.97) !important;
}

.btn-ugelb, .btn-ugelb-gold, .btn-acceso-funcionarios {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-ugelb:hover, .btn-ugelb-gold:hover, .btn-acceso-funcionarios:hover {
    transform: translateY(-1px) scale(1.01);
}
.btn-ugelb:active, .btn-ugelb-gold:active, .btn-acceso-funcionarios:active {
    transform: scale(0.97) !important;
}

.card-institucional {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
}
.card-institucional:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.form-control, .form-select {
    transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease !important;
}

/* 5. Accesibilidad respetada */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
    .bolognesi-runner,
    .bolognesi-top-bar::after {
        display: none !important;
    }
}