:root{
    --tika-sidebar-w: 280px;
    --tika-sidebar-w-collapsed: 76px;

    --tika-sidebar-ease: cubic-bezier(.2,.8,.2,1);
    --tika-sidebar-ms: 220ms;
    --tika-fast-ms: 160ms;

    --tika-flyout-w: 240px;
    --tika-flyout-gap: 10px;
    --tika-flyout-z: 1050;
}

/* =========================
   Layout modes
   ========================= */

.layout-auth .tika-shell{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-app .tika-shell{
    display: grid;
    grid-template-columns: var(--tika-sidebar-w) 1fr;
    min-height: 100vh;
    transition: grid-template-columns var(--tika-sidebar-ms) var(--tika-sidebar-ease);
}

.layout-app.sidebar-collapsed .tika-shell{
    grid-template-columns: var(--tika-sidebar-w-collapsed) 1fr;
}

.layout-app .tika-shell__sidebar{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: visible !important; /* necesario para flyout */
    z-index: 1040;
}

.tika-shell__main{
    min-width: 0;
}

/* =========================
   Sidebar interno
   ========================= */

.tika-sidebar{
    width: 100%;
    height: 100%;
    overflow: visible;
    transition:
            padding var(--tika-sidebar-ms) var(--tika-sidebar-ease),
            background-color var(--tika-sidebar-ms) var(--tika-sidebar-ease);
}

.layout-app.sidebar-collapsed .tika-sidebar{
    padding-left: .85rem !important;
    padding-right: .85rem !important;
}

/* Links no deben desbordar */
.tika-sidebar .nav-link{
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    transition:
            background-color 140ms var(--tika-sidebar-ease),
            border-color 140ms var(--tika-sidebar-ease),
            color 140ms var(--tika-sidebar-ease);
}

/* Header gap */
.tika-sidebar-header{
    gap: .5rem;
}

/* =========================
   ✅ FIX REAL: texto colapsa ancho (no solo opacity)
   ========================= */

/* Los spans de texto deben poder “encogerse” */
.tika-sidebar .tika-nav-text,
.tika-sidebar .tika-brand-text,
.tika-sidebar .tika-nav-caret{
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;

    /* ancho animable */
    max-width: 220px;

    opacity: 1;
    transform: translateX(0);

    transition:
            max-width var(--tika-sidebar-ms) var(--tika-sidebar-ease),
            opacity var(--tika-fast-ms) var(--tika-sidebar-ease),
            transform var(--tika-fast-ms) var(--tika-sidebar-ease);
}

/* En colapsado: el texto NO ocupa ancho */
.layout-app.sidebar-collapsed .tika-sidebar .tika-nav-text,
.layout-app.sidebar-collapsed .tika-sidebar .tika-brand-text,
.layout-app.sidebar-collapsed .tika-sidebar .tika-nav-caret{
    max-width: 0;          /* ✅ esto evita el desborde del pill */
    opacity: 0;
    transform: translateX(-6px);
}

/* En colapsado: centra el contenido y elimina espacios */
.layout-app.sidebar-collapsed .tika-sidebar .nav-link{
    justify-content: center !important;
    gap: 0 !important;      /* ✅ quita separación fantasma */
}

/* Opcional: reduce padding horizontal del link para que no “estire” el pill */
.layout-app.sidebar-collapsed .tika-sidebar .nav-link{
    padding-left: .65rem !important;
    padding-right: .65rem !important;
}

/* =========================
   Toggle styles + flecha rota
   ========================= */

.tika-sidebar-toggle{
    background: transparent;
    border: none;
    box-shadow: none;
}
.tika-sidebar-toggle:hover,
.tika-sidebar-toggle:active,
.tika-sidebar-toggle:focus{
    background: transparent;
    border: none;
    box-shadow: none;
}

#logo-sidebar{
    width: 34px;
    height: 34px;
    object-fit: contain;
}

#sidebarToggle .material-symbols-rounded{
    display: inline-block;
    transition: transform var(--tika-fast-ms) var(--tika-sidebar-ease);
    transform-origin: 50% 50%;
}
body.sidebar-collapsed #sidebarToggle .material-symbols-rounded{
    transform: rotate(180deg);
}

/* =========================
   Submenu floating (collapsed)
   ========================= */

/* En colapsado: ocultamos el contenedor collapse (Bootstrap) */
.layout-app.sidebar-collapsed .tika-sidebar .tika-submenu.collapse{
    display: none;
}

.layout-app.sidebar-collapsed .tika-sidebar .tika-submenu.collapse.show {
    display: block;
}

.layout-app.sidebar-collapsed .tika-sidebar .tika-has-submenu{
    position: relative;
}

/* El UL es el flyout */
.layout-app.sidebar-collapsed .tika-sidebar .tika-submenu-list{
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);

    width: var(--tika-flyout-w);
    padding: .5rem;
    margin: 0;

    background: rgba(11,16,32,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);

    display: none;
    opacity: 0;

    z-index: var(--tika-flyout-z);

    transition:
            opacity var(--tika-fast-ms) var(--tika-sidebar-ease),
            transform var(--tika-fast-ms) var(--tika-sidebar-ease);
}

/* Hover */
.layout-app.sidebar-collapsed .tika-sidebar .tika-has-submenu:hover .tika-submenu-list{
    display: block;
    opacity: 1;
    transform: translateY(-50%) translateX(-6px);
}

/* Click pinned */
.layout-app.sidebar-collapsed .tika-sidebar .tika-has-submenu.is-open .tika-submenu-list{
    display: block;
    opacity: 1;
    transform: translateY(-50%) translateX(-6px);
}

/* Dentro del flyout: forzamos texto visible */
.layout-app.sidebar-collapsed .tika-sidebar .tika-submenu-list .tika-nav-text{
    max-width: 220px !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Links del flyout alineados normal */
.layout-app.sidebar-collapsed .tika-sidebar .tika-submenu-list .nav-link{
    justify-content: flex-start !important;
    gap: .5rem !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
}

/* =========================
   Logout collapsed
   ========================= */
.layout-app.sidebar-collapsed .tika-sidebar .tika-logout-btn{
    justify-content: center;
}

/* =========================
   Modo soporte collapsed
   ========================= */

/* Expandido: solo el form; el botón-icono y su selector flotante quedan ocultos */
.tika-support-select{
    position: relative;
}
.tika-support-select .tika-support-collapsed-icon,
.layout-app:not(.sidebar-collapsed) .tika-support-select .tika-support-flyout{
    display: none;
}

/* Colapsado: se oculta el form (el select no cabe en 76px) y se muestra el icono */
.layout-app.sidebar-collapsed .tika-support-select form{
    display: none;
}
.layout-app.sidebar-collapsed .tika-support-select .tika-support-collapsed-icon{
    display: inline-flex;
    justify-content: center;
    padding-left: .65rem;
    padding-right: .65rem;
}

/* Opción del select de soporte a dos líneas (nombre + email) */
.ts-dropdown .tika-user-opt-name{ font-weight: 600; }
.ts-dropdown .tika-user-opt-mail{ font-size: .78rem; color: rgba(234,240,255,.55); }