:root {
    --primary: #17a2b8;
    scrollbar-width: thin;
}

    :root:not(:has(.bg-light)) {
        scrollbar-color: #686868 #424242;
    }

.bg-dark2 .overflow-auto, .bg-dark .overflow-auto {
    scrollbar-color: #686868 #424242;
}

/*#region CSS por defecto*/
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

/* Replace Bootstrap's default btn-primary */
.btn-primary {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #168e9e;
        border-color: #14828e;
    }

    .btn-primary:focus,
    .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
    }

    .btn-primary.disabled,
    .btn-primary:disabled {
        color: #fff;
        background-color: #17a2b8;
        border-color: #17a2b8;
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #14828e;
        border-color: #127780;
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
        }

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

@media (min-width: 1020px) {
    body {
        margin-bottom: 0px;
    }
}

/* CSS */

.bg-dark2 {
    background-color: #202020 !important;
}

.bg-purple {
    background-color: #6f42c1 !important;
}

.btn-color {
    background-color: #17a2b8 !important;
}

    .btn-color:enabled:hover {
        background-color: #008da8 !important;
    }

.mg-top {
    margin-top: 60px;
}

input:disabled {
    background-color: #9d9d9e !important;
}

body.bg-dark .bg-themed {
    background-color: #343a40;
}

body.bg-dark2 .bg-themed {
    background-color: #0a0b0d;
}

body.bg-light .bg-themed {
    background-color: #fff;
}

body.bg-light .text-themed {
    color: black;
}

.bg-dark3 {
    background-color: #181818 !important;
}

body.bg-dark .bg-dark3 {
    background-color: #272c30 !important;
}

body.bg-light .bg-dark3 {
    background-color: #e9ecef !important;
}

body.bg-dark2 .text-themed,
body.bg-dark .text-themed
{
    color: white;
}

body.bg-light .text-themed-important {
    color: black !important;
}

body.bg-dark2 .text-themed-important,
body.bg-dark .text-themed-important {
    color: white !important;
}

body {
    visibility: hidden;
}

.widget {
    background-color: #e9ecef;
    border: 1px solid #6c757d;
    border-radius: 8px;
}

    .widget:not(:has(.bg-header.rounded-top)) {
        padding: 6px;
    }

body.bg-dark2 .widget {
    background-color: #181818;
    border-color: #333;
}

body.bg-dark .widget {
    background-color: #272c30;
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    /* Page transition */
    ::view-transition-old(root) {
        animation: vt-out 150ms ease both;
    }

    ::view-transition-new(root) {
        animation: vt-in 200ms ease both;
    }

    @keyframes vt-out {
        to {
            opacity: 0;
            transform: translateY(4px);
        }
    }

    @keyframes vt-in {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
    }

    /* Navbar as shared element */
    .navbar {
        view-transition-name: navbar;
    }

    /* Keep navbar visually stable */
    ::view-transition-old(navbar),
    ::view-transition-new(navbar) {
        animation: none;
    }

    #btnFicharFichados {
        view-transition-name: btnFicharFichados;
    }

    /* Keep navbar visually stable */
    ::view-transition-old(btnFicharFichados),
    ::view-transition-new(btnFicharFichados) {
        animation: none;
    }
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: #4f4f4f;
}

body.bg-light .skeleton {
    background: #e9ecef;
}

/* shimmer */
.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 150%;
    background: linear-gradient(90deg, transparent, rgba(134,134,134,.6), transparent);
    animation: skeleton-shimmer 2s infinite;
}

body.bg-light .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
}

@keyframes skeleton-shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 100%;
    }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after {
        animation: none;
    }
}

.eye {
    cursor: pointer;
    position: absolute;
    right: 1px;
    bottom: 1px;
    padding: 10px;
    color: #666;
}