.fi-sidebar {
    border-right: 1px solid rgb(231 229 228);
    background: rgb(255 253 250);
}

.dark .fi-sidebar {
    border-right-color: rgb(68 64 60);
    background: rgb(28 25 23);
}

.fi-sidebar-header {
    min-height: 4.5rem;
    border-bottom: 1px solid rgb(231 229 228);
}

.dark .fi-sidebar-header {
    border-bottom-color: rgb(68 64 60);
}

html {
    scrollbar-color: rgb(168 162 158 / 0.4) transparent;
    scrollbar-width: thin;
}

html::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgb(168 162 158 / 0.4);
    background-clip: content-box;
}

html::-webkit-scrollbar-thumb:hover {
    background: rgb(217 119 6 / 0.7);
    background-clip: content-box;
}

html.dark {
    scrollbar-color: rgb(168 162 158 / 0.45) transparent;
}

html.dark::-webkit-scrollbar-thumb {
    background: rgb(168 162 158 / 0.45);
    background-clip: content-box;
}

.fi-sidebar-nav {
    padding: 1rem 0.75rem;
    /* Keep the scrollbar invisible until interaction without changing the
       navigation width when it appears. */
    direction: rtl;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.fi-sidebar-nav:hover,
.fi-sidebar-nav:focus-within {
    scrollbar-color: rgb(168 162 158 / 0.4) transparent;
}

.fi-sidebar-nav > * {
    direction: ltr;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Chromium's standard scrollbar properties override its pseudo-elements.
   Use one styling mechanism per engine, with a fixed gutter in every state. */
@supports selector(::-webkit-scrollbar) {
    .fi-sidebar-nav,
    .fi-sidebar-nav:hover,
    .fi-sidebar-nav:focus-within {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    .fi-sidebar-nav::-webkit-scrollbar,
    .fi-sidebar-nav::-webkit-scrollbar-track,
    .fi-sidebar-nav::-webkit-scrollbar-track-piece,
    .fi-sidebar-nav::-webkit-scrollbar-corner {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .fi-sidebar-nav::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    background-clip: content-box;
}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb,
.fi-sidebar-nav:focus-within::-webkit-scrollbar-thumb {
    background: rgb(168 162 158 / 0.4);
    background-clip: content-box;
}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb:hover,
.fi-sidebar-nav:focus-within::-webkit-scrollbar-thumb:hover {
    background: rgb(217 119 6 / 0.7);
    background-clip: content-box;
}

.fi-sidebar-group {
    margin-bottom: 0;
}

.fi-sidebar-group-btn {
    padding: 0.5rem 0.625rem;
}

.fi-sidebar-group-label {
    color: rgb(120 113 108);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fi-sidebar-group-btn::before {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
}

.fi-sidebar-group[data-group-label='Operación'] > .fi-sidebar-group-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7.5 21 3 16.5m0 0L7.5 12M3 16.5h18m-4.5-13.5L21 7.5m0 0L16.5 12M21 7.5H3'/%3E%3C/svg%3E");
}

.fi-sidebar-group[data-group-label='Catálogo'] > .fi-sidebar-group-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 6.75A2.25 2.25 0 0 1 5.25 4.5h4.5L12 6.75h6.75A2.25 2.25 0 0 1 21 9v8.25a2.25 2.25 0 0 1-2.25 2.25h-13.5A2.25 2.25 0 0 1 3 17.25V6.75Z'/%3E%3C/svg%3E");
}

.fi-sidebar-group[data-group-label='Administración'] > .fi-sidebar-group-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath stroke-linecap='round' d='M12 3v2m0 14v2M3 12h2m14 0h2M5.64 5.64l1.42 1.42m9.88 9.88 1.42 1.42m0-12.16-1.42 1.42m-9.88 9.88-1.42 1.42'/%3E%3C/svg%3E");
}

.fi-sidebar-group[data-group-label='Filament Shield'] > .fi-sidebar-group-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3 4.5 6v5.25c0 4.58 3.15 8.85 7.5 9.75 4.35-.9 7.5-5.17 7.5-9.75V6L12 3Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.5 12 1.6 1.6 3.4-3.4'/%3E%3C/svg%3E");
}

.dark .fi-sidebar-group-label {
    color: rgb(168 162 158);
}

.fi-sidebar-group-items {
    margin-inline-start: 0.75rem;
    padding-inline-start: 0.75rem;
    border-left: 2px solid rgb(217 119 6 / 0.82) !important;
    border-inline-start: 2px solid rgb(217 119 6 / 0.82) !important;
    border-inline-start-color: rgb(217 119 6 / 0.82) !important;
}

.dark .fi-sidebar-group-items {
    border-left-color: rgb(245 158 11 / 0.9) !important;
    border-inline-start-color: rgb(245 158 11 / 0.9) !important;
}

.fi-sidebar-item-btn {
    min-height: 2.75rem;
    border-radius: 0.5rem;
    color: rgb(68 64 60);
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.dark .fi-sidebar-item-btn {
    color: rgb(231 229 228);
}

.fi-sidebar-item-btn:hover {
    background: rgb(245 245 244);
    color: rgb(28 25 23);
}

.dark .fi-sidebar-item-btn:hover {
    background: rgb(68 64 60);
    color: rgb(255 251 235);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: rgb(245 158 11);
    color: rgb(28 25 23);
    box-shadow: 0 4px 12px rgb(245 158 11 / 0.2);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: inherit;
}

.fi-sidebar-item-icon {
    color: rgb(168 162 158);
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: rgb(217 119 6);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: rgb(28 25 23);
}

/* Shared presentation for Filament's login, MFA and password recovery pages. */
.fi-simple-layout {
    background:
        radial-gradient(ellipse at 15% 10%, rgb(251 191 36 / 0.14), transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgb(214 211 209 / 0.28), transparent 50%),
        rgb(250 249 246);
}

.dark .fi-simple-layout {
    background:
        radial-gradient(ellipse at 15% 10%, rgb(217 119 6 / 0.10), transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgb(120 113 108 / 0.10), transparent 50%),
        rgb(18 18 20);
}

.fi-simple-layout .fi-simple-main-ctn {
    padding: 1.25rem;
}

.fi-simple-layout .fi-simple-main {
    max-width: 30rem;
    margin-block: 4rem;
    padding: clamp(1.5rem, 5vw, 2.75rem);
    border: 1px solid rgb(231 229 228);
    border-radius: 1.5rem;
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 20px 60px -24px rgb(68 64 60 / 0.23), 0 2px 8px rgb(68 64 60 / 0.03);
}

.dark .fi-simple-layout .fi-simple-main {
    border-color: rgb(255 255 255 / 0.10);
    background: rgb(28 28 31 / 0.97);
    box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.55);
}

.fi-simple-layout .fi-simple-header .fi-logo {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.fi-simple-layout .fi-simple-header-heading {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.fi-simple-layout .fi-simple-header-subheading {
    margin-top: 0.875rem;
    line-height: 1.65;
    text-wrap: pretty;
}

.fi-simple-layout .fi-input-wrp {
    border-radius: 0.875rem;
    background: rgb(250 250 249);
}

.dark .fi-simple-layout .fi-input-wrp {
    background: rgb(255 255 255 / 0.04);
}

.fi-simple-layout .fi-input-wrp:not(.fi-invalid):focus-within {
    outline: 3px solid rgb(245 158 11 / 0.14);
    outline-offset: 2px;
}

.fi-simple-layout .fi-input {
    min-height: 3rem;
    font-size: 1rem;
}

.fi-simple-layout .fi-btn {
    min-height: 3rem;
    border-radius: 0.875rem;
    font-weight: 650;
}

.fi-simple-layout .fi-one-time-code-input-ctn {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.375rem, 1.5vw, 0.625rem);
    width: 100%;
    max-width: 21rem;
    margin-inline: auto;
}

.fi-simple-layout .fi-one-time-code-input-ctn > .fi-one-time-code-input-digit {
    width: 100%;
    min-width: 0;
    height: 3.25rem;
    padding: 0;
    border-radius: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

@media (max-width: 480px) {
    .fi-simple-layout .fi-simple-main-ctn {
        padding-inline: 1rem;
    }

    .fi-simple-layout .fi-simple-main {
        padding: 1.5rem 1.25rem;
        border-radius: 1.25rem;
    }
}

@media (forced-colors: active) {
    .fi-sidebar-nav,
    .fi-sidebar-nav:hover,
    .fi-sidebar-nav:focus-within {
        scrollbar-color: auto;
        scrollbar-width: auto;
    }
}