/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ===== Toast overlay global (Fase11) ===== */
/* Apareix centrat a la part superior de qualsevol pàgina durant 3s. */
.toast-overlay[b-j96o30wlye] {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    animation: toastFadeIn-b-j96o30wlye 0.25s ease;
    pointer-events: none;
    max-width: 90vw;
    white-space: nowrap;
}

/* Colors per tipus */
.toast-warning[b-j96o30wlye] { background: #d97706; }
.toast-error[b-j96o30wlye]   { background: #dc2626; }
.toast-info[b-j96o30wlye]    { background: #2563eb; }

.toast-icon[b-j96o30wlye] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.toast-text[b-j96o30wlye] {
    flex: 1;
}

@keyframes toastFadeIn-b-j96o30wlye {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#blazor-error-ui[b-j96o30wlye] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-j96o30wlye] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-c80vjzgbfm],
.components-reconnect-repeated-attempt-visible[b-c80vjzgbfm],
.components-reconnect-failed-visible[b-c80vjzgbfm],
.components-pause-visible[b-c80vjzgbfm],
.components-resume-failed-visible[b-c80vjzgbfm],
.components-rejoining-animation[b-c80vjzgbfm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-retrying[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-failed[b-c80vjzgbfm],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-c80vjzgbfm] {
    display: block;
}


#components-reconnect-modal[b-c80vjzgbfm] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-c80vjzgbfm 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-c80vjzgbfm 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-c80vjzgbfm 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-c80vjzgbfm]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-c80vjzgbfm 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-c80vjzgbfm {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-c80vjzgbfm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-c80vjzgbfm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-c80vjzgbfm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-c80vjzgbfm] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-c80vjzgbfm] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-c80vjzgbfm] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-c80vjzgbfm] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-c80vjzgbfm] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-c80vjzgbfm] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-c80vjzgbfm 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-c80vjzgbfm] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-c80vjzgbfm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/84uT9_rdph_543.razor.rz.scp.css */
/* Layout específic de la pàgina especial restringida */
.special-layout[b-k8fopy8cen] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sidebar[b-k8fopy8cen] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.sidebar-brand[b-k8fopy8cen] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
}

.logo-cube[b-k8fopy8cen] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate-b-k8fopy8cen 16s ease-in-out infinite;
}

.cube-face[b-k8fopy8cen] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-k8fopy8cen] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-k8fopy8cen] { transform: rotateY(0deg) translateZ(20px); }
.cube-back[b-k8fopy8cen] { transform: rotateY(180deg) translateZ(20px); }
.cube-right[b-k8fopy8cen] { transform: rotateY(90deg) translateZ(20px); }
.cube-left[b-k8fopy8cen] { transform: rotateY(-90deg) translateZ(20px); }
.cube-top[b-k8fopy8cen] { transform: rotateX(90deg) translateZ(20px); }
.cube-bottom[b-k8fopy8cen] { transform: rotateX(-90deg) translateZ(20px); }

@keyframes cubeRotate-b-k8fopy8cen {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    20% { transform: rotateX(12deg) rotateY(72deg); }
    40% { transform: rotateX(-8deg) rotateY(144deg); }
    60% { transform: rotateX(10deg) rotateY(216deg); }
    80% { transform: rotateX(-6deg) rotateY(288deg); }
    100% { transform: rotateX(0deg) rotateY(360deg); }
}

.sidebar-icon[b-k8fopy8cen] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .sidebar-icon:hover[b-k8fopy8cen] {
        background: #334155;
        color: #e2e8f0;
    }

    .sidebar-icon.active[b-k8fopy8cen] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .sidebar-icon.active:hover[b-k8fopy8cen] {
        background: #2563eb;
        color: #fff;
    }

    .sidebar-icon.current[b-k8fopy8cen] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

.main-content[b-k8fopy8cen] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    overflow: hidden;
}

.search-bar[b-k8fopy8cen] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.search-button[b-k8fopy8cen],
.stop-button[b-k8fopy8cen] {
    height: 38px;
    width: 44px;
    min-width: 44px;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-button[b-k8fopy8cen] {
    background: #3b82f6;
}

.search-button:hover:not(:disabled)[b-k8fopy8cen] {
    background: #2563eb;
}

.stop-button[b-k8fopy8cen] {
    background: #ef4444;
}

.stop-button:hover:not(:disabled)[b-k8fopy8cen] {
    background: #dc2626;
}

.search-button:disabled[b-k8fopy8cen],
.stop-button:disabled[b-k8fopy8cen] {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-button.wide-button[b-k8fopy8cen] {
    width: auto;
    min-width: 0;
    padding: 0 16px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

.user-menu[b-k8fopy8cen] {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.user-badge[b-k8fopy8cen] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.user-badge:hover[b-k8fopy8cen] {
    background: #0b5f59;
}

.center-area[b-k8fopy8cen] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.stacked-boxes[b-k8fopy8cen] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 720px;
}

.status-box[b-k8fopy8cen] {
    min-width: 320px;
    max-width: 620px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    padding: 28px;
    text-align: center;
    color: #1e293b;
    font-weight: 600;
}

.schedule-box[b-k8fopy8cen] {
    max-width: 720px;
    text-align: center;
    padding: 20px;
}

.schedule-row[b-k8fopy8cen] {
    display: grid;
    grid-template-columns: 140px 120px 90px;
    align-items: center;
    gap: 10px;
    margin: 8px auto 0;
    width: fit-content;
}

.schedule-label[b-k8fopy8cen] {
    font-size: 13px;
    color: #334155;
    font-weight: 700;
    text-align: left;
}

.schedule-time-text[b-k8fopy8cen] {
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 14px;
    width: 120px;
    text-align: center;
}

.schedule-clear[b-k8fopy8cen] {
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
}

/* Fila de dies de la setmana per cada slot de cerca programada */
.schedule-days-row[b-k8fopy8cen] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px auto 10px;
    width: fit-content;
}

.schedule-days-label[b-k8fopy8cen] {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    width: 46px;
    text-align: left;
}

.schedule-day-item[b-k8fopy8cen] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 3px 7px;
    user-select: none;
}

.schedule-day-item input[type="checkbox"][b-k8fopy8cen] {
    accent-color: #2563eb;
    cursor: pointer;
    width: 13px;
    height: 13px;
}

.schedule-days-note[b-k8fopy8cen] {
    font-size: 11px;
    color: #94a3b8;
    margin: 6px auto 0;
    text-align: center;
}

.schedule-actions[b-k8fopy8cen] {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.schedule-save[b-k8fopy8cen] {
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    padding: 0 14px;
    cursor: pointer;
}

.schedule-save:disabled[b-k8fopy8cen] {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-error[b-k8fopy8cen] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.status-blocked[b-k8fopy8cen] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.status-title[b-k8fopy8cen] {
    font-size: 14px;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.status-value[b-k8fopy8cen] {
    font-size: 56px;
    line-height: 1;
    color: #0f172a;
    margin-bottom: 8px;
}

.status-caption[b-k8fopy8cen] {
    font-size: 13px;
    color: #64748b;
}

.status-note[b-k8fopy8cen] {
    margin-top: 10px;
    font-size: 12px;
    color: #1d4ed8;
    font-weight: 600;
}

.spinner[b-k8fopy8cen] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-k8fopy8cen 0.6s linear infinite;
}

@keyframes spin-b-k8fopy8cen {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/84uT9_rdph_543_fdsb_uy65gr__jkl.razor.rz.scp.css */
/* Pàgina BD fase 3 */
.special-layout[b-hq7l1eof6d] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sidebar[b-hq7l1eof6d] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.sidebar-brand[b-hq7l1eof6d] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
}

.logo-cube[b-hq7l1eof6d] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate-b-hq7l1eof6d 16s ease-in-out infinite;
}

.cube-face[b-hq7l1eof6d] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-hq7l1eof6d] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-hq7l1eof6d] { transform: rotateY(0deg) translateZ(20px); }
.cube-back[b-hq7l1eof6d] { transform: rotateY(180deg) translateZ(20px); }
.cube-right[b-hq7l1eof6d] { transform: rotateY(90deg) translateZ(20px); }
.cube-left[b-hq7l1eof6d] { transform: rotateY(-90deg) translateZ(20px); }
.cube-top[b-hq7l1eof6d] { transform: rotateX(90deg) translateZ(20px); }
.cube-bottom[b-hq7l1eof6d] { transform: rotateX(-90deg) translateZ(20px); }

@keyframes cubeRotate-b-hq7l1eof6d {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    20% { transform: rotateX(12deg) rotateY(72deg); }
    40% { transform: rotateX(-8deg) rotateY(144deg); }
    60% { transform: rotateX(10deg) rotateY(216deg); }
    80% { transform: rotateX(-6deg) rotateY(288deg); }
    100% { transform: rotateX(0deg) rotateY(360deg); }
}

.sidebar-icon[b-hq7l1eof6d] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .sidebar-icon:hover[b-hq7l1eof6d] {
        background: #334155;
        color: #e2e8f0;
    }

    .sidebar-icon.active[b-hq7l1eof6d] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .sidebar-icon.active:hover[b-hq7l1eof6d] {
        background: #2563eb;
        color: #fff;
    }

    .sidebar-icon.current[b-hq7l1eof6d] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

.main-content[b-hq7l1eof6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    overflow: hidden;
}

.db-topbar[b-hq7l1eof6d] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.top-field[b-hq7l1eof6d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.top-field label[b-hq7l1eof6d] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.top-field select[b-hq7l1eof6d],
.top-field input[b-hq7l1eof6d] {
    height: 38px;
    min-width: 260px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 10px;
}

.danger-button[b-hq7l1eof6d] {
    height: 38px;
    min-width: 170px;
    border: none;
    border-radius: 6px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.user-menu[b-hq7l1eof6d] {
    margin-left: auto;
}

.user-badge[b-hq7l1eof6d] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.db-content[b-hq7l1eof6d] {
    flex: 1;
    overflow: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-box[b-hq7l1eof6d] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    padding: 18px;
    color: #1e293b;
    font-weight: 600;
}

.db-box[b-hq7l1eof6d] {
    width: 100%;
    max-width: none;
    text-align: left;
}

.pager-row[b-hq7l1eof6d] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.pager-row button[b-hq7l1eof6d],
.save-button[b-hq7l1eof6d] {
    height: 34px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    padding: 0 12px;
    cursor: pointer;
}

.pager-row button:disabled[b-hq7l1eof6d],
.save-button:disabled[b-hq7l1eof6d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-wrap[b-hq7l1eof6d] {
    width: 100%;
    overflow: auto;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
}

.db-table[b-hq7l1eof6d] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.db-table th[b-hq7l1eof6d],
.db-table td[b-hq7l1eof6d] {
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 8px;
    white-space: nowrap;
    text-align: left;
}

.db-table thead th[b-hq7l1eof6d] {
    background: #f1f5f9;
    position: sticky;
    top: 0;
}

.edit-panel[b-hq7l1eof6d] {
    margin-top: 10px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.status-note[b-hq7l1eof6d] {
    font-size: 12px;
    color: #1d4ed8;
    font-weight: 600;
}

.status-error[b-hq7l1eof6d] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.status-blocked[b-hq7l1eof6d] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}
/* /Components/Pages/AdminCredencials.razor.rz.scp.css */
/* ===========================================================
   AdminCredencials.razor.css — Estils scoped per a la pàgina
   d'administració /84uT9_rdph_543/pdft87_por78_w.

   Estructura visual:
     - .adm-layout       : contenidor pantalla completa
     - .adm-topbar       : franja negra superior amb cubs 3D
     - .adm-page         : àrea central amb targetes
     - .adm-card         : bloc/targeta blanca amb ombra
     - .adm-user-bar     : selecció usuari existent + nou usuari
     - .adm-perms        : bloc de permisos
     - .adm-carousel     : carrusel de condicions per pàgina
   =========================================================== */

.adm-layout[b-31o7yw505m] {
    min-height: 100vh;
    background: #f1f5f9;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ====== A) Franja negra superior amb cubs ====== */
.adm-topbar[b-31o7yw505m] {
    background: #000;
    color: #fff;
    border-bottom: 1px solid #111;
    padding: 10px 16px;
}

/* franja distribuïda: cubs repartits per tota l'amplada */
.adm-topbar-inner[b-31o7yw505m] {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: hidden;
}

.adm-topbar-title[b-31o7yw505m] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    padding-left: 12px;
}

    .adm-topbar-title span[b-31o7yw505m] {
        font-weight: 600;
        font-size: 15px;
    }

    .adm-topbar-title small[b-31o7yw505m] {
        color: #94a3b8;
        font-size: 12px;
    }

        .adm-topbar-title small b.ok[b-31o7yw505m] { color: #22c55e; }
        .adm-topbar-title small b.ko[b-31o7yw505m] { color: #ef4444; }

/* Cub 3D petit distribuit a la franja */
.adm-cube[b-31o7yw505m] {
    width: 36px;
    height: 36px;
    perspective: 200px;
    flex: 0 0 auto;
}

.adm-cube-3d[b-31o7yw505m] {
    width: 36px;
    height: 36px;
    position: relative;
    transform-style: preserve-3d;
    animation: admCubeRotate-b-31o7yw505m 14s ease-in-out infinite;
}

.adm-cube-face[b-31o7yw505m] {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

    .adm-cube-face img[b-31o7yw505m] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 2px;
    }

.adm-cube-front[b-31o7yw505m]  { transform: rotateY(0deg)    translateZ(18px); }
.adm-cube-back[b-31o7yw505m]   { transform: rotateY(180deg)  translateZ(18px); }
.adm-cube-right[b-31o7yw505m]  { transform: rotateY(90deg)   translateZ(18px); }
.adm-cube-left[b-31o7yw505m]   { transform: rotateY(-90deg)  translateZ(18px); }
.adm-cube-top[b-31o7yw505m]    { transform: rotateX(90deg)   translateZ(18px); }
.adm-cube-bottom[b-31o7yw505m] { transform: rotateX(-90deg)  translateZ(18px); }

@keyframes admCubeRotate-b-31o7yw505m {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

/* ====== Àrea central ====== */
.adm-page[b-31o7yw505m] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.adm-card[b-31o7yw505m] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    padding: 16px 18px;
}

.adm-card-h[b-31o7yw505m] {
    margin-bottom: 12px;
}

    .adm-card-h h2[b-31o7yw505m] {
        margin: 0 0 4px;
        font-size: 18px;
        color: #0f172a;
    }

    .adm-card-h small[b-31o7yw505m] {
        color: #64748b;
        font-size: 12px;
    }

/* ====== B) Barra superior d'usuari (existent / nou) ====== */
.adm-user-bar[b-31o7yw505m] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 18px;
    align-items: end;
}

.adm-user-pick label[b-31o7yw505m],
.adm-user-new label[b-31o7yw505m],
.adm-user-current label[b-31o7yw505m] {
    display: block;
    font-size: 12px;
    color: #475569;
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.adm-user-pick select[b-31o7yw505m],
.adm-user-new input[b-31o7yw505m] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

.adm-user-new-row[b-31o7yw505m] {
    display: flex;
    gap: 8px;
}

    .adm-user-new-row input[b-31o7yw505m] { flex: 1; }

.adm-input-error[b-31o7yw505m] {
    border-color: #ef4444 !important;
    background: #fef2f2;
}

.adm-error[b-31o7yw505m] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.adm-user-current-value[b-31o7yw505m] {
    padding: 5px 10px;
    background: #0f172a;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    min-height: 28px;
    display: flex;
    align-items: center;
    flex: 1;
}

/* Etiqueta + valor en horitzontal */
.adm-user-current-inline[b-31o7yw505m] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-user-current-lbl[b-31o7yw505m] {
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ====== C1) Bloc permisos ====== */
.adm-perms-2col[b-31o7yw505m] {
    columns: 2;
    column-gap: 16px;
}

    .adm-perms-2col .adm-perm-row[b-31o7yw505m] {
        break-inside: avoid;
        margin-bottom: 8px;
    }

.adm-perms-grid[b-31o7yw505m] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr auto;
    gap: 14px;
    align-items: end;
}

.adm-field label[b-31o7yw505m] {
    display: block;
    font-size: 12px;
    color: #475569;
    margin-bottom: 4px;
    font-weight: 600;
}

.adm-field select[b-31o7yw505m],
.adm-field input[type="text"][b-31o7yw505m] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

.adm-chk[b-31o7yw505m] {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-bottom: 8px;
}

    .adm-chk label[b-31o7yw505m] {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        margin: 0;
        text-transform: none;
        font-weight: 500;
        color: #0f172a;
        font-size: 13px;
    }

.adm-actions[b-31o7yw505m] { display: flex; justify-content: flex-end; }

/* ====== C2) Carrusel pàgines ====== */
.adm-carousel-nav[b-31o7yw505m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    background: #0f172a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
}

.adm-carousel-title[b-31o7yw505m] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .adm-carousel-title strong[b-31o7yw505m] { font-size: 15px; }

.adm-carousel-route[b-31o7yw505m] {
    color: #94a3b8;
    font-size: 12px;
    font-family: 'Consolas', monospace;
}

.adm-carousel-pos[b-31o7yw505m] {
    margin-left: 8px;
    color: #cbd5e1;
    font-size: 12px;
}

.adm-carousel-slide[b-31o7yw505m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.adm-credfield[b-31o7yw505m] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adm-credfield-h[b-31o7yw505m] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

    .adm-credfield-h label[b-31o7yw505m] {
        font-weight: 600;
        font-size: 13px;
        color: #0f172a;
    }

    .adm-credfield-h small[b-31o7yw505m] { color: #64748b; font-weight: 400; }

.adm-credfield-meta[b-31o7yw505m] {
    font-size: 11px;
    color: #475569;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 6px;
}

.adm-credfield input[b-31o7yw505m] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}

.adm-credfield-actions[b-31o7yw505m] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.adm-empty[b-31o7yw505m],
.adm-hint[b-31o7yw505m] {
    text-align: center;
    color: #64748b;
    padding: 16px;
    font-style: italic;
}

/* ====== Botons ====== */
.btn[b-31o7yw505m] {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}

    .btn:disabled[b-31o7yw505m] { opacity: 0.5; cursor: not-allowed; }
    .btn:active:not(:disabled)[b-31o7yw505m] { transform: translateY(1px); }

.btn-primary[b-31o7yw505m] { background: #2563eb; color: #fff; }
    .btn-primary:hover:not(:disabled)[b-31o7yw505m] { background: #1d4ed8; }

.btn-danger[b-31o7yw505m] { background: #dc2626; color: #fff; }
    .btn-danger:hover:not(:disabled)[b-31o7yw505m] { background: #b91c1c; }

.btn-warning[b-31o7yw505m] { background: #d97706; color: #fff; }
    .btn-warning:hover:not(:disabled)[b-31o7yw505m] { background: #b45309; }

.btn-ghost[b-31o7yw505m] {
    background: transparent;
    color: #fff;
    border: 1px solid #334155;
}
    .btn-ghost:hover:not(:disabled)[b-31o7yw505m] { background: #1e293b; }

.btn-ghost-dark[b-31o7yw505m] {
    background: transparent;
    color: #0f172a;
    border: 1px solid #94a3b8;
}
    .btn-ghost-dark:hover:not(:disabled)[b-31o7yw505m] { background: #f1f5f9; }

/* ====== Modal de confirmació ====== */
.adm-modal-backdrop[b-31o7yw505m] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adm-modal[b-31o7yw505m] {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}

.adm-modal-msg[b-31o7yw505m] {
    font-size: 15px;
    color: #0f172a;
    margin: 0 0 20px;
    line-height: 1.5;
}

.adm-modal-actions[b-31o7yw505m] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ====== Reanomenament d'usuari ====== */
.adm-rename-row[b-31o7yw505m] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

    .adm-rename-row input[b-31o7yw505m] { flex: 1; }

.adm-user-empty[b-31o7yw505m] { color: #94a3b8; font-style: italic; }

/* ====== Bloc Config Panell ====== */
.adm-cfgpanel-load[b-31o7yw505m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adm-cfgpanel-grid[b-31o7yw505m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    align-items: end;
}

.adm-readonly[b-31o7yw505m] {
    padding: 8px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    font-family: 'Consolas', monospace;
}

/* ====== Permisos inline per fila (D2) ====== */
.adm-perms-all[b-31o7yw505m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adm-perm-row[b-31o7yw505m] {
    display: grid;
    grid-template-columns: 2fr auto auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.adm-perm-name[b-31o7yw505m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .adm-perm-name strong[b-31o7yw505m] { font-size: 13px; color: #0f172a; }

.adm-perm-chk[b-31o7yw505m] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.adm-perm-icons[b-31o7yw505m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .adm-perm-icons label[b-31o7yw505m] { font-size: 11px; color: #64748b; font-weight: 600; }
    .adm-perm-icons input[b-31o7yw505m] { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; }

.adm-perm-action[b-31o7yw505m] { display: flex; justify-content: flex-end; }

/* ====== Estats d'accés (manté els avisos previs) ====== */
.admin-denied[b-31o7yw505m],
.admin-loading[b-31o7yw505m] {
    max-width: 720px;
    margin: 48px auto;
    padding: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    color: #0f172a;
}

/* ====== Responsive ====== */
@media (max-width: 960px) {
    .adm-user-bar[b-31o7yw505m] { grid-template-columns: 1fr; }
    .adm-perm-row[b-31o7yw505m] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Documents.razor.rz.scp.css */
/* ===== Layout general de pantalla completa ===== */
.documents-layout[b-kppr10ge0h] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Barra lateral esquerra ===== */
.sidebar[b-kppr10ge0h] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

/* Contenidor logo amb perspectiva per al cub 3D */
.sidebar-brand[b-kppr10ge0h] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
    /* No overflow:hidden: incompatible amb preserve-3d en alguns navegadors */
}

/* El cub pròpiament dit: gira contínuament en múltiples eixos */
.logo-cube[b-kppr10ge0h] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate-b-kppr10ge0h 16s ease-in-out infinite;
}

/* Cada cara del cub: quadrat 40x40 amb fons quasi transparent */
.cube-face[b-kppr10ge0h] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-kppr10ge0h] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

/* Les 6 cares: front/left/top mostren AEC, back/right/bottom mostren AER */
.cube-front[b-kppr10ge0h]  { transform: rotateY(0deg)    translateZ(20px); }
.cube-back[b-kppr10ge0h]   { transform: rotateY(180deg)  translateZ(20px); }
.cube-right[b-kppr10ge0h]  { transform: rotateY(90deg)   translateZ(20px); }
.cube-left[b-kppr10ge0h]   { transform: rotateY(-90deg)  translateZ(20px); }
.cube-top[b-kppr10ge0h]    { transform: rotateX(90deg)   translateZ(20px); }
.cube-bottom[b-kppr10ge0h] { transform: rotateX(-90deg)  translateZ(20px); }

/* Rotaci├│ principal Y amb lleuger balanceig en X per sensaci├│ de cub lliure */
@keyframes cubeRotate-b-kppr10ge0h {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

.sidebar-icon[b-kppr10ge0h] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .sidebar-icon:hover[b-kppr10ge0h] {
        background: #334155;
        color: #e2e8f0;
    }

    .sidebar-icon:hover[b-kppr10ge0h] {
        background: #334155;
        color: #e2e8f0;
    }

    .sidebar-icon.active[b-kppr10ge0h] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .sidebar-icon.active:hover[b-kppr10ge0h] {
        background: #2563eb;
        color: #fff;
    }

    .sidebar-icon.current[b-kppr10ge0h] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

/* ===== Contingut principal ===== */
.main-content[b-kppr10ge0h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    overflow: hidden;
}

/* ===== Barra superior de cerca ===== */
.search-bar[b-kppr10ge0h] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.search-field[b-kppr10ge0h] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .search-field label[b-kppr10ge0h] {
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .search-field input[b-kppr10ge0h],
    .search-field select[b-kppr10ge0h] {
        height: 38px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 0 12px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        background: #fff;
        color: #334155;
    }

        .search-field input:focus[b-kppr10ge0h],
        .search-field select:focus[b-kppr10ge0h] {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }

.search-field-path[b-kppr10ge0h] {
    flex: 1;
    min-width: 200px;
}

.search-field-content[b-kppr10ge0h] {
    flex: 1;
    min-width: 200px;
}

.search-field-limit[b-kppr10ge0h] {
    width: 92px;
    min-width: 92px;
}

/* Camp petit pel toggle de Cerca Aut, al costat de Màxim resultats */
.search-field-auto[b-kppr10ge0h] {
    width: 68px;
    min-width: 68px;
}

/* La caixa de control del toggle: sembla un select per├▓ amb un checkbox centrat */
.search-auto-toggle[b-kppr10ge0h] {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Quan el checkbox ├®s actiu, la caixa agafa un to verd */
.search-auto-toggle:has(input:checked)[b-kppr10ge0h] {
    border-color: #0f766e;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.search-auto-toggle input[type="checkbox"][b-kppr10ge0h] {
    width: 18px;
    height: 18px;
    accent-color: #0f766e;
    cursor: pointer;
    margin: 0;
}

.search-button[b-kppr10ge0h] {
    height: 38px;
    width: 44px;
    min-width: 44px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .search-button:hover:not(:disabled)[b-kppr10ge0h] {
        background: #2563eb;
    }

    .search-button:disabled[b-kppr10ge0h] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.stop-button[b-kppr10ge0h] {
    height: 38px;
    width: 44px;
    min-width: 44px;
    border: none;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-size: 14px;
}

    .stop-button:hover:not(:disabled)[b-kppr10ge0h] {
        background: #dc2626;
    }

    .stop-button:disabled[b-kppr10ge0h] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* Fase 8 (Cerca Dret) - botons d'ordenaci├│ de resultats.
   Visibles nom├®s quan ha acabat la cerca (esquerra o dreta) i 'Cerca Aut' est├á desactivat. */
.sort-button[b-kppr10ge0h] {
    height: 38px;
    min-width: 70px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: background 0.2s, border-color 0.2s;
}

    .sort-button:hover[b-kppr10ge0h] {
        background: #e2e8f0;
        border-color: #94a3b8;
    }

    .sort-button:disabled[b-kppr10ge0h] {
        opacity: 0.45;
        cursor: not-allowed;
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #64748b;
    }

    .sort-button-active[b-kppr10ge0h] {
        background: #0f766e;
        color: #fff;
        border-color: #0f766e;
    }

        .sort-button-active:hover[b-kppr10ge0h] {
            background: #115e59;
            border-color: #115e59;
        }

        .sort-button-active:disabled[b-kppr10ge0h] {
            background: #0f766e;
            border-color: #0f766e;
            color: #fff;
            opacity: 0.45;
        }

.sort-button-arrow[b-kppr10ge0h] {
    font-size: 11px;
    opacity: 0.85;
}

/* Fase 8 (Cerca Dret) - checkbox 'Cerca profunda' (IA externa).
   Mantingut visualment al costat de 'Cerca Aut' i amb el mateix estil del 'search-field-auto'.
   De moment desactivat per UI: el checkbox està en disabled i el camp queda en false. */
.search-field-deep[b-kppr10ge0h] {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    opacity: 0.7;
    margin-top: 5px;
}

    .search-field-deep label[b-kppr10ge0h] {
        margin-bottom: -4px;
        margin-top: 4px;
    }

.search-deep-toggle[b-kppr10ge0h] {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 6px;
    margin-top: -6px;
}

    .search-deep-toggle input[type="checkbox"][b-kppr10ge0h] {
        width: 18px;
        height: 18px;
        accent-color: #7c3aed;
        cursor: not-allowed;
        margin: 0;
    }

.content-search-button[b-kppr10ge0h],
.content-stop-button[b-kppr10ge0h] {
    height: 38px;
    width: 44px;
    min-width: 44px;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-size: 14px;
}

.content-search-button[b-kppr10ge0h] {
    background: #16a34a;
}

    .content-search-button:hover:not(:disabled)[b-kppr10ge0h] {
        background: #15803d;
    }

.content-stop-button[b-kppr10ge0h] {
    background: #ea580c;
}

    .content-stop-button:hover:not(:disabled)[b-kppr10ge0h] {
        background: #c2410c;
    }

.content-search-button:disabled[b-kppr10ge0h],
.content-stop-button:disabled[b-kppr10ge0h] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Rodona d'usuari a la dreta de la lupa */
.user-menu[b-kppr10ge0h] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Pont invisible entre la rodona i el desplegable.
   Això evita que el menú desaparegui mentre el ratolí travessa el petit espai. */
.user-menu[b-kppr10ge0h]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.user-badge[b-kppr10ge0h] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    user-select: none;
    cursor: pointer;
}

.user-menu:hover .user-badge[b-kppr10ge0h],
.user-badge:hover[b-kppr10ge0h] {
    background: #0b5f59;
}

.user-menu-dropdown[b-kppr10ge0h] {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 210px;
    padding: 10px;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    display: none;
    z-index: 50;
}

.user-menu:hover .user-menu-dropdown[b-kppr10ge0h] {
    display: block;
}

.user-menu-name[b-kppr10ge0h] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
    line-height: 1.35;
    word-break: break-word;
}

.user-menu-mail[b-kppr10ge0h] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
    line-height: 1.3;
}

.user-menu-action[b-kppr10ge0h] {
    width: 100%;
    min-height: 34px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.user-menu-action-signout[b-kppr10ge0h] {
    background: #fef2f2;
    color: #b91c1c;
}

.user-menu-action-signout:hover[b-kppr10ge0h] {
    background: #fee2e2;
}

.user-menu-action-signin[b-kppr10ge0h] {
    background: #eff6ff;
    color: #1d4ed8;
}

.user-menu-action-signin:hover[b-kppr10ge0h] {
    background: #dbeafe;
}

/* ===== Spinner de càrrega ===== */
.spinner[b-kppr10ge0h] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-kppr10ge0h 0.6s linear infinite;
}

@keyframes spin-b-kppr10ge0h {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Zona inferior de resultats ===== */
.results-area[b-kppr10ge0h] {
    flex: 1;
    overflow-y: auto;
    padding: 3px 20px 20px 20px;
}

.error-message[b-kppr10ge0h] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.search-info-message[b-kppr10ge0h] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.no-results[b-kppr10ge0h] {
    color: #64748b;
    font-size: 14px;
    text-align: center;
    padding: 40px 0;
}


.roots-shortcuts[b-kppr10ge0h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.root-shortcut-link[b-kppr10ge0h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #0f766e;
    color: #0f766e;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

    .root-shortcut-link:hover[b-kppr10ge0h] {
        background: #0f766e;
        color: #fff;
    }
.results-columns[b-kppr10ge0h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.results-toolbar[b-kppr10ge0h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.results-toolbar h4[b-kppr10ge0h] {
    margin: 0;
    padding: 0;
    border-bottom: none;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-select-all[b-kppr10ge0h] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0f766e;
    margin: 0;
}

    .results-select-all:disabled[b-kppr10ge0h] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.results-header-actions[b-kppr10ge0h] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-progress-info[b-kppr10ge0h] {
    font-size: 11px;
    color: #0369a1;
    font-weight: 600;
}

.results-clock[b-kppr10ge0h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: spin-b-kppr10ge0h 1.2s linear infinite;
    transform-origin: center center;
}

.results-limit-warning[b-kppr10ge0h] {
    font-size: 11px;
    color: #b45309;
    font-weight: 600;
}

.results-timeout-warning[b-kppr10ge0h] {
    font-size: 11px;
    color: #b91c1c;
    font-weight: 600;
}

.result-item[b-kppr10ge0h] {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background 0.15s;
}

    .result-item:hover[b-kppr10ge0h] {
        background: #eff6ff;
    }

.result-top-row[b-kppr10ge0h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-selector[b-kppr10ge0h] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0f766e;
    margin: 0;
}

    .result-item a[b-kppr10ge0h] {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #1e40af;
        font-size: 14px;
        font-weight: 500;
        min-width: 0;
        flex: 1;
    }

        .result-item a:hover[b-kppr10ge0h] {
            text-decoration: underline;
        }

.result-icon[b-kppr10ge0h] {
    flex-shrink: 0;
}

.result-name[b-kppr10ge0h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-path[b-kppr10ge0h] {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-left: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-meta[b-kppr10ge0h] {
    display: block;
    font-size: 11px;
    color: #b0bec5;
    margin-left: 24px;
    margin-top: 2px;
}

.result-links[b-kppr10ge0h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 24px;
    margin-top: 2px;
}

.result-links a[b-kppr10ge0h] {
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
    text-decoration: none;
}

.result-links a:hover[b-kppr10ge0h] {
    text-decoration: underline;
}

.content-search-icon[b-kppr10ge0h] {
    font-size: 15px;
    line-height: 1;
}

/* Avís de roots saltats per manca de permisos */
.skipped-roots-warning[b-kppr10ge0h] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 7px 14px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ===== Spinner de càrrega ===== */
.spinner[b-kppr10ge0h] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-kppr10ge0h 0.6s linear infinite;
}

@keyframes spin-b-kppr10ge0h {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Zona inferior de resultats ===== */
.results-area[b-kppr10ge0h] {
    flex: 1;
    overflow-y: auto;
    padding: 3px 20px 20px 20px;
}

.error-message[b-kppr10ge0h] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.search-info-message[b-kppr10ge0h] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.no-results[b-kppr10ge0h] {
    color: #64748b;
    font-size: 14px;
    text-align: center;
    padding: 40px 0;
}

.results-columns[b-kppr10ge0h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.results-toolbar[b-kppr10ge0h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.results-toolbar h4[b-kppr10ge0h] {
    margin: 0;
    padding: 0;
    border-bottom: none;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-select-all[b-kppr10ge0h] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0f766e;
    margin: 0;
}

    .results-select-all:disabled[b-kppr10ge0h] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.results-header-actions[b-kppr10ge0h] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-progress-info[b-kppr10ge0h] {
    font-size: 11px;
    color: #0369a1;
    font-weight: 600;
}

.results-clock[b-kppr10ge0h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: spin-b-kppr10ge0h 1.2s linear infinite;
    transform-origin: center center;
}

.results-limit-warning[b-kppr10ge0h] {
    font-size: 11px;
    color: #b45309;
    font-weight: 600;
}

.results-timeout-warning[b-kppr10ge0h] {
    font-size: 11px;
    color: #b91c1c;
    font-weight: 600;
}

.result-item[b-kppr10ge0h] {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background 0.15s;
}

    .result-item:hover[b-kppr10ge0h] {
        background: #eff6ff;
    }

.result-top-row[b-kppr10ge0h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-selector[b-kppr10ge0h] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0f766e;
    margin: 0;
}

    .result-item a[b-kppr10ge0h] {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #1e40af;
        font-size: 14px;
        font-weight: 500;
        min-width: 0;
        flex: 1;
    }

        .result-item a:hover[b-kppr10ge0h] {
            text-decoration: underline;
        }

.result-icon[b-kppr10ge0h] {
    flex-shrink: 0;
}

.result-name[b-kppr10ge0h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-path[b-kppr10ge0h] {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-left: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-meta[b-kppr10ge0h] {
    display: block;
    font-size: 11px;
    color: #b0bec5;
    margin-left: 24px;
    margin-top: 2px;
}

.result-links[b-kppr10ge0h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 24px;
    margin-top: 2px;
}

.result-links a[b-kppr10ge0h] {
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
    text-decoration: none;
}

.result-links a:hover[b-kppr10ge0h] {
    text-decoration: underline;
}

.content-search-icon[b-kppr10ge0h] {
    font-size: 15px;
    line-height: 1;
}

.result-right-error[b-kppr10ge0h] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 2px 6px;
    margin: 4px 0 4px 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
   Fase10 ÔÇö UI Responsive (PC / Tablet / M├▓bil)
   ---------------------------------------------------------------------
   * Bot├│ hamburguesa: amagat a escriptori; visible a m├▓bil per obrir el
     drawer lateral.
   * Tablet (768-1023px): sidebar m├®s estreta, sense canvis estructurals.
   * M├▓bil (<768px): la sidebar es treu del flux, es posiciona fixed a
     l'esquerra i nom├®s es mostra quan el contenidor t├® la classe
     `sidebar-open` (toggle controlat pel codi Blazor).
   ===================================================================== */

.sidebar-hamburger[b-kppr10ge0h] {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #1e293b;
    color: #e2e8f0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sidebar-hamburger:hover[b-kppr10ge0h] {
    background: #334155;
}

/* ----- Tablet ----- */
@media (max-width: 1023px) {
    .sidebar[b-kppr10ge0h] {
        width: 48px;
        min-width: 48px;
    }

    .search-bar[b-kppr10ge0h] {
        padding: 10px 12px;
        gap: 8px;
    }
}

/* ----- M├▓bil ----- */
@media (max-width: 767px) {
    /* La barra lateral es treu del flux i passa a ser un drawer. */
    .sidebar[b-kppr10ge0h] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 64px;
        min-width: 64px;
        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out;
        z-index: 1050;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
    }

    .documents-layout.sidebar-open .sidebar[b-kppr10ge0h] {
        transform: translateX(0);
    }

    /* El contingut principal ocupa tota l'amplada. */
    .main-content[b-kppr10ge0h] {
        width: 100%;
    }

    /* Bot├│ hamburguesa visible. Padding-left a la barra de cerca per no
       quedar tapada pel bot├│. */
    .sidebar-hamburger[b-kppr10ge0h] {
        display: flex;
    }

    .search-bar[b-kppr10ge0h] {
        padding-left: 60px;
        flex-direction: column;
        align-items: stretch;
    }

    .search-field-path[b-kppr10ge0h],
    .search-field-content[b-kppr10ge0h] {
        min-width: 0;
        width: 100%;
    }

    .search-field-limit[b-kppr10ge0h],
    .search-field-auto[b-kppr10ge0h] {
        width: auto;
    }

    /* Resultats: for├ºar una sola columna i lletra m├®s compacta. */
    .results-area[b-kppr10ge0h] {
        padding: 8px;
    }
}

/* /Components/Pages/Home.razor.rz.scp.css */
/* ===========================================================
   Home.razor.css — Estils de la pàgina principal (/).
   -----------------------------------------------------------
   Estructura idèntica a Documents.razor.css:
     - home-layout: flex horitzontal pantalla completa
     - home-sidebar: barra prima esquerra (52px) fosca
     - home-main: àrea dreta (topbar + centre)
     - home-topbar: barra superior minimalista (badge)
     - home-center: cos central amb cub logo gegant girant
   =========================================================== */

/* ===== Layout general ===== */
.home-layout[b-swqvbbma93] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Sidebar esquerra (mateixa mida i colors que Documents) ===== */
.home-sidebar[b-swqvbbma93] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

/* Logo cub petit (sidebar): clicable → / */
.home-sidebar-brand[b-swqvbbma93] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
    cursor: pointer;
    outline: none;
}

    .home-sidebar-brand:hover .home-logo-cube[b-swqvbbma93] {
        filter: brightness(1.15);
    }

/* Cub petit (reutilitza animació cubeRotate) */
.home-logo-cube[b-swqvbbma93] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate-b-swqvbbma93 16s ease-in-out infinite;
}

/* Icona de navegació (per a pàgines futures) */
.home-sidebar-icon[b-swqvbbma93] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .home-sidebar-icon:hover[b-swqvbbma93] {
        background: #334155;
        color: #e2e8f0;
    }

    .home-sidebar-icon.active[b-swqvbbma93] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .home-sidebar-icon.active:hover[b-swqvbbma93] {
        background: #2563eb;
        color: #fff;
    }

    .home-sidebar-icon.current[b-swqvbbma93] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

/* ===== Àrea principal dreta (fons fosc com la pàgina original) ===== */
.home-main[b-swqvbbma93] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    overflow: hidden;
}

/* ===== Barra superior minimalista ===== */
.home-topbar[b-swqvbbma93] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
    height: 56px;
}

/* Badge usuari (rodona) */
.home-user-menu[b-swqvbbma93] {
    position: relative;
    display: flex;
    align-items: center;
}

.home-user-menu[b-swqvbbma93]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.home-user-badge[b-swqvbbma93] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.5px;
}

    .home-user-badge:hover[b-swqvbbma93] {
        background: #0d9488;
        transform: scale(1.05);
    }

/* Desplegable del badge */
.home-user-dropdown[b-swqvbbma93] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 170px;
    z-index: 200;
    overflow: hidden;
}

.home-user-menu:hover .home-user-dropdown[b-swqvbbma93],
.home-user-menu:focus-within .home-user-dropdown[b-swqvbbma93] {
    display: block;
}

.home-user-name[b-swqvbbma93] {
    padding: 12px 16px 4px;
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}

.home-user-mail[b-swqvbbma93] {
    padding: 0 16px 8px;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
}

.home-user-action[b-swqvbbma93] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 16px;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.home-user-signin[b-swqvbbma93] { color: #2563eb; }
.home-user-signin:hover[b-swqvbbma93] { background: #eff6ff; }
.home-user-signout[b-swqvbbma93] { color: #dc2626; }
.home-user-signout:hover[b-swqvbbma93] { background: #fef2f2; }

/* ===== Cos central: cub gegant girant (fons fosc original) ===== */
.home-center[b-swqvbbma93] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    overflow: hidden;
}

/* Contenidor del cub gran: cursor pointer (recorda que és clicable) */
.home-big-cube-wrap[b-swqvbbma93] {
    width: 440px;
    height: 440px;
    perspective: 1000px;
    cursor: pointer;
}

    .home-big-cube-wrap:hover .home-big-cube[b-swqvbbma93] {
        filter: drop-shadow(0 0 48px rgba(59,130,246,0.38));
    }

/* El cub gegant en sí */
.home-big-cube[b-swqvbbma93] {
    width: 440px;
    height: 440px;
    position: relative;
    transform-style: preserve-3d;
    animation: bigCubeRotate-b-swqvbbma93 14s ease-in-out infinite;
}

/* Cares del cub gran: fons blau fosc com la sidebar de Documents */
.big-cube-face[b-swqvbbma93] {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.big-cube-logo[b-swqvbbma93] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 28px;
}

/* Posicions de les 6 cares (radi = 220px = mig de 440px) */
.big-cube-front[b-swqvbbma93]  { transform: rotateY(0deg)    translateZ(220px); }
.big-cube-back[b-swqvbbma93]   { transform: rotateY(180deg)  translateZ(220px); }
.big-cube-right[b-swqvbbma93]  { transform: rotateY(90deg)   translateZ(220px); }
.big-cube-left[b-swqvbbma93]   { transform: rotateY(-90deg)  translateZ(220px); }
.big-cube-top[b-swqvbbma93]    { transform: rotateX(90deg)   translateZ(220px); }
.big-cube-bottom[b-swqvbbma93] { transform: rotateX(-90deg)  translateZ(220px); }

/* Animació del cub gran: rotació suau amb lleuger caboteig en X */
@keyframes bigCubeRotate-b-swqvbbma93 {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(10deg)   rotateY(72deg); }
    40%  { transform: rotateX(-7deg)   rotateY(144deg); }
    60%  { transform: rotateX(9deg)    rotateY(216deg); }
    80%  { transform: rotateX(-5deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

/* Animació del cub petit de la sidebar (compartida amb Documents.razor.css) */
@keyframes cubeRotate-b-swqvbbma93 {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

/* Les cares del cub petit de la sidebar (reutilitzades de Documents) */
.cube-face[b-swqvbbma93] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-swqvbbma93] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-swqvbbma93]  { transform: rotateY(0deg)    translateZ(20px); }
.cube-back[b-swqvbbma93]   { transform: rotateY(180deg)  translateZ(20px); }
.cube-right[b-swqvbbma93]  { transform: rotateY(90deg)   translateZ(20px); }
.cube-left[b-swqvbbma93]   { transform: rotateY(-90deg)  translateZ(20px); }
.cube-top[b-swqvbbma93]    { transform: rotateX(90deg)   translateZ(20px); }
.cube-bottom[b-swqvbbma93] { transform: rotateX(-90deg)  translateZ(20px); }

/* ===== Responsive ===== */
@media (max-width: 767px) {
    .home-big-cube-wrap[b-swqvbbma93] {
        width: 260px;
        height: 260px;
        perspective: 600px;
    }

    .home-big-cube[b-swqvbbma93] {
        width: 260px;
        height: 260px;
    }

    .big-cube-front[b-swqvbbma93]  { transform: rotateY(0deg)    translateZ(130px); }
    .big-cube-back[b-swqvbbma93]   { transform: rotateY(180deg)  translateZ(130px); }
    .big-cube-right[b-swqvbbma93]  { transform: rotateY(90deg)   translateZ(130px); }
    .big-cube-left[b-swqvbbma93]   { transform: rotateY(-90deg)  translateZ(130px); }
    .big-cube-top[b-swqvbbma93]    { transform: rotateX(90deg)   translateZ(130px); }
    .big-cube-bottom[b-swqvbbma93] { transform: rotateX(-90deg)  translateZ(130px); }
}
/* /Components/Pages/OpenProject.razor.rz.scp.css */
/* Reutilitza l'estructura visual de PowerBiInformes per mantenir coherència */
/* ===========================================================
   Outlook.razor.css — Fase13
   Mateixa estructura visual que PowerBiInformes.razor.css
   =========================================================== */

.pbi-layout[b-2b14rqp9rv] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pbi-sidebar[b-2b14rqp9rv] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.pbi-sidebar-brand[b-2b14rqp9rv] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
    cursor: pointer;
    outline: none;
}

.pbi-logo-cube[b-2b14rqp9rv] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiCubeRotate-b-2b14rqp9rv 16s ease-in-out infinite;
}

.cube-face[b-2b14rqp9rv] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-2b14rqp9rv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-2b14rqp9rv]  { transform: rotateY(0deg)    translateZ(20px); }
.cube-back[b-2b14rqp9rv]   { transform: rotateY(180deg)  translateZ(20px); }
.cube-right[b-2b14rqp9rv]  { transform: rotateY(90deg)   translateZ(20px); }
.cube-left[b-2b14rqp9rv]   { transform: rotateY(-90deg)  translateZ(20px); }
.cube-top[b-2b14rqp9rv]    { transform: rotateX(90deg)   translateZ(20px); }
.cube-bottom[b-2b14rqp9rv] { transform: rotateX(-90deg)  translateZ(20px); }

@keyframes pbiCubeRotate-b-2b14rqp9rv {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

.pbi-sidebar-icon[b-2b14rqp9rv] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .pbi-sidebar-icon:hover[b-2b14rqp9rv] {
        background: #334155;
        color: #e2e8f0;
    }

    .pbi-sidebar-icon.active[b-2b14rqp9rv] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .pbi-sidebar-icon.active:hover[b-2b14rqp9rv] {
        background: #2563eb;
        color: #fff;
    }

    .pbi-sidebar-icon.current[b-2b14rqp9rv] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

.pbi-main[b-2b14rqp9rv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    overflow: hidden;
}

.pbi-topbar[b-2b14rqp9rv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
    height: 56px;
    color: #e2e8f0;
}

.pbi-title[b-2b14rqp9rv] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.pbi-user-menu[b-2b14rqp9rv] {
    position: relative;
    display: flex;
    align-items: center;
}

.pbi-user-menu[b-2b14rqp9rv]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.pbi-user-badge[b-2b14rqp9rv] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.5px;
}

    .pbi-user-badge:hover[b-2b14rqp9rv] {
        background: #0d9488;
        transform: scale(1.05);
    }

.pbi-user-dropdown[b-2b14rqp9rv] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 170px;
    z-index: 200;
    overflow: hidden;
}

.pbi-user-menu:hover .pbi-user-dropdown[b-2b14rqp9rv],
.pbi-user-menu:focus-within .pbi-user-dropdown[b-2b14rqp9rv] {
    display: block;
}

.pbi-user-name[b-2b14rqp9rv] {
    padding: 12px 16px 4px;
    font-size: 13px;
    color: #475569;
}

.pbi-user-mail[b-2b14rqp9rv] {
    padding: 0 16px 8px;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
}

.pbi-user-action[b-2b14rqp9rv] {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #1e293b;
}

    .pbi-user-action:hover[b-2b14rqp9rv] {
        background: #f1f5f9;
    }

.pbi-center[b-2b14rqp9rv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    overflow: hidden;
}

.pbi-big-cube-wrap[b-2b14rqp9rv] {
    width: 440px;
    height: 440px;
    perspective: 1000px;
    cursor: pointer;
}

    .pbi-big-cube-wrap:hover .pbi-big-cube[b-2b14rqp9rv] {
        filter: drop-shadow(0 0 48px rgba(59,130,246,0.38));
    }

.pbi-big-cube[b-2b14rqp9rv] {
    width: 440px;
    height: 440px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiBigCubeRotate-b-2b14rqp9rv 14s ease-in-out infinite;
}

.big-cube-face[b-2b14rqp9rv] {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.big-cube-logo[b-2b14rqp9rv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 28px;
}

.big-cube-front[b-2b14rqp9rv]  { transform: rotateY(0deg)    translateZ(220px); }
.big-cube-back[b-2b14rqp9rv]   { transform: rotateY(180deg)  translateZ(220px); }
.big-cube-right[b-2b14rqp9rv]  { transform: rotateY(90deg)   translateZ(220px); }
.big-cube-left[b-2b14rqp9rv]   { transform: rotateY(-90deg)  translateZ(220px); }
.big-cube-top[b-2b14rqp9rv]    { transform: rotateX(90deg)   translateZ(220px); }
.big-cube-bottom[b-2b14rqp9rv] { transform: rotateX(-90deg)  translateZ(220px); }

@keyframes pbiBigCubeRotate-b-2b14rqp9rv {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(10deg)   rotateY(72deg); }
    40%  { transform: rotateX(-7deg)   rotateY(144deg); }
    60%  { transform: rotateX(9deg)    rotateY(216deg); }
    80%  { transform: rotateX(-5deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

@media (max-width: 767px) {
    .pbi-big-cube-wrap[b-2b14rqp9rv] {
        width: 260px;
        height: 260px;
        perspective: 600px;
    }

    .pbi-big-cube[b-2b14rqp9rv] {
        width: 260px;
        height: 260px;
    }

    .big-cube-front[b-2b14rqp9rv]  { transform: rotateY(0deg)    translateZ(130px); }
    .big-cube-back[b-2b14rqp9rv]   { transform: rotateY(180deg)  translateZ(130px); }
    .big-cube-right[b-2b14rqp9rv]  { transform: rotateY(90deg)   translateZ(130px); }
    .big-cube-left[b-2b14rqp9rv]   { transform: rotateY(-90deg)  translateZ(130px); }
    .big-cube-top[b-2b14rqp9rv]    { transform: rotateX(90deg)   translateZ(130px); }
    .big-cube-bottom[b-2b14rqp9rv] { transform: rotateX(-90deg)  translateZ(130px); }
}

/* /Components/Pages/Outlook.razor.rz.scp.css */
/* Reutilitza l'estructura visual de PowerBiInformes per mantenir coherència */
/* ===========================================================
   Outlook.razor.css — Fase13
   Mateixa estructura visual que PowerBiInformes.razor.css
   =========================================================== */

.pbi-layout[b-rcv0aiwfex] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pbi-sidebar[b-rcv0aiwfex] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.pbi-sidebar-brand[b-rcv0aiwfex] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
    cursor: pointer;
    outline: none;
}

.pbi-logo-cube[b-rcv0aiwfex] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiCubeRotate-b-rcv0aiwfex 16s ease-in-out infinite;
}

.cube-face[b-rcv0aiwfex] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-rcv0aiwfex] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-rcv0aiwfex]  { transform: rotateY(0deg)    translateZ(20px); }
.cube-back[b-rcv0aiwfex]   { transform: rotateY(180deg)  translateZ(20px); }
.cube-right[b-rcv0aiwfex]  { transform: rotateY(90deg)   translateZ(20px); }
.cube-left[b-rcv0aiwfex]   { transform: rotateY(-90deg)  translateZ(20px); }
.cube-top[b-rcv0aiwfex]    { transform: rotateX(90deg)   translateZ(20px); }
.cube-bottom[b-rcv0aiwfex] { transform: rotateX(-90deg)  translateZ(20px); }

@keyframes pbiCubeRotate-b-rcv0aiwfex {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

.pbi-sidebar-icon[b-rcv0aiwfex] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .pbi-sidebar-icon:hover[b-rcv0aiwfex] {
        background: #334155;
        color: #e2e8f0;
    }

    .pbi-sidebar-icon.active[b-rcv0aiwfex] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .pbi-sidebar-icon.active:hover[b-rcv0aiwfex] {
        background: #2563eb;
        color: #fff;
    }

    .pbi-sidebar-icon.current[b-rcv0aiwfex] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

.pbi-main[b-rcv0aiwfex] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    overflow: hidden;
}

.pbi-topbar[b-rcv0aiwfex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
    height: 56px;
    color: #e2e8f0;
}

.pbi-title[b-rcv0aiwfex] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.pbi-user-menu[b-rcv0aiwfex] {
    position: relative;
    display: flex;
    align-items: center;
}

.pbi-user-menu[b-rcv0aiwfex]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.pbi-user-badge[b-rcv0aiwfex] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.5px;
}

    .pbi-user-badge:hover[b-rcv0aiwfex] {
        background: #0d9488;
        transform: scale(1.05);
    }

.pbi-user-dropdown[b-rcv0aiwfex] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 170px;
    z-index: 200;
    overflow: hidden;
}

.pbi-user-menu:hover .pbi-user-dropdown[b-rcv0aiwfex],
.pbi-user-menu:focus-within .pbi-user-dropdown[b-rcv0aiwfex] {
    display: block;
}

.pbi-user-name[b-rcv0aiwfex] {
    padding: 12px 16px 4px;
    font-size: 13px;
    color: #475569;
}

.pbi-user-mail[b-rcv0aiwfex] {
    padding: 0 16px 8px;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
}

.pbi-user-action[b-rcv0aiwfex] {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #1e293b;
}

    .pbi-user-action:hover[b-rcv0aiwfex] {
        background: #f1f5f9;
    }

.pbi-center[b-rcv0aiwfex] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    overflow: hidden;
}

.pbi-big-cube-wrap[b-rcv0aiwfex] {
    width: 440px;
    height: 440px;
    perspective: 1000px;
    cursor: pointer;
}

    .pbi-big-cube-wrap:hover .pbi-big-cube[b-rcv0aiwfex] {
        filter: drop-shadow(0 0 48px rgba(59,130,246,0.38));
    }

.pbi-big-cube[b-rcv0aiwfex] {
    width: 440px;
    height: 440px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiBigCubeRotate-b-rcv0aiwfex 14s ease-in-out infinite;
}

.big-cube-face[b-rcv0aiwfex] {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.big-cube-logo[b-rcv0aiwfex] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 28px;
}

.big-cube-front[b-rcv0aiwfex]  { transform: rotateY(0deg)    translateZ(220px); }
.big-cube-back[b-rcv0aiwfex]   { transform: rotateY(180deg)  translateZ(220px); }
.big-cube-right[b-rcv0aiwfex]  { transform: rotateY(90deg)   translateZ(220px); }
.big-cube-left[b-rcv0aiwfex]   { transform: rotateY(-90deg)  translateZ(220px); }
.big-cube-top[b-rcv0aiwfex]    { transform: rotateX(90deg)   translateZ(220px); }
.big-cube-bottom[b-rcv0aiwfex] { transform: rotateX(-90deg)  translateZ(220px); }

@keyframes pbiBigCubeRotate-b-rcv0aiwfex {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(10deg)   rotateY(72deg); }
    40%  { transform: rotateX(-7deg)   rotateY(144deg); }
    60%  { transform: rotateX(9deg)    rotateY(216deg); }
    80%  { transform: rotateX(-5deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

@media (max-width: 767px) {
    .pbi-big-cube-wrap[b-rcv0aiwfex] {
        width: 260px;
        height: 260px;
        perspective: 600px;
    }

    .pbi-big-cube[b-rcv0aiwfex] {
        width: 260px;
        height: 260px;
    }

    .big-cube-front[b-rcv0aiwfex]  { transform: rotateY(0deg)    translateZ(130px); }
    .big-cube-back[b-rcv0aiwfex]   { transform: rotateY(180deg)  translateZ(130px); }
    .big-cube-right[b-rcv0aiwfex]  { transform: rotateY(90deg)   translateZ(130px); }
    .big-cube-left[b-rcv0aiwfex]   { transform: rotateY(-90deg)  translateZ(130px); }
    .big-cube-top[b-rcv0aiwfex]    { transform: rotateX(90deg)   translateZ(130px); }
    .big-cube-bottom[b-rcv0aiwfex] { transform: rotateX(-90deg)  translateZ(130px); }
}

/* /Components/Pages/PowerBi829xl.razor.rz.scp.css */
/* ================================================================
   PowerBi829xl.razor.css — Estils pàgina /84uT9_rdph_543/powerbi829xl
   ----------------------------------------------------------------
   Fase16 — Rèplica exacta del CSS de 84uT9_rdph_543.razor.css
   per mantenir coherència visual entre les tres pàgines especials.
   ================================================================ */

/* ─── Botó descàrrega CSV temporal ───────────────────────────── */
.btn-download-csv[b-mpdbtsvgdi] {
    display: inline-block;
    padding: 6px 14px;
    background: #1a6f38;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.btn-download-csv:hover[b-mpdbtsvgdi] {
    background: #145c2e;
    color: #fff;
}

/* ─── Layout general ─────────────────────────────────────────── */
.special-layout[b-mpdbtsvgdi] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ─── Sidebar esquerra ───────────────────────────────────────── */
.sidebar[b-mpdbtsvgdi] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.sidebar-brand[b-mpdbtsvgdi] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
}

.logo-cube[b-mpdbtsvgdi] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate-b-mpdbtsvgdi 16s ease-in-out infinite;
}

.cube-face[b-mpdbtsvgdi] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-mpdbtsvgdi] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-mpdbtsvgdi]  { transform: rotateY(0deg)    translateZ(20px); }
.cube-back[b-mpdbtsvgdi]   { transform: rotateY(180deg)  translateZ(20px); }
.cube-right[b-mpdbtsvgdi]  { transform: rotateY(90deg)   translateZ(20px); }
.cube-left[b-mpdbtsvgdi]   { transform: rotateY(-90deg)  translateZ(20px); }
.cube-top[b-mpdbtsvgdi]    { transform: rotateX(90deg)   translateZ(20px); }
.cube-bottom[b-mpdbtsvgdi] { transform: rotateX(-90deg)  translateZ(20px); }

@keyframes cubeRotate-b-mpdbtsvgdi {
    0%   { transform: rotateX(0deg)   rotateY(0deg);   }
    20%  { transform: rotateX(12deg)  rotateY(72deg);  }
    40%  { transform: rotateX(-8deg)  rotateY(144deg); }
    60%  { transform: rotateX(10deg)  rotateY(216deg); }
    80%  { transform: rotateX(-6deg)  rotateY(288deg); }
    100% { transform: rotateX(0deg)   rotateY(360deg); }
}

/* ─── Icones sidebar ─────────────────────────────────────────── */
.sidebar-icon[b-mpdbtsvgdi] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .sidebar-icon:hover[b-mpdbtsvgdi] {
        background: #334155;
        color: #e2e8f0;
    }

    /* Icona navegable (activa però no la pàgina actual) */
    .sidebar-icon.active[b-mpdbtsvgdi] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .sidebar-icon.active:hover[b-mpdbtsvgdi] {
        background: #2563eb;
        color: #fff;
    }

    /* Icona de la pàgina actual (no navegable) */
    .sidebar-icon.current[b-mpdbtsvgdi] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

/* ─── Contingut principal ────────────────────────────────────── */
.main-content[b-mpdbtsvgdi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    overflow: hidden;
}

/* ─── Topbar (barra negra superior amb cubs 3D) ──────────────── */
.topbar-powerbi[b-mpdbtsvgdi] {
    background: #000;
    color: #fff;
    border-bottom: 1px solid #111;
    padding: 10px 16px;
    flex-shrink: 0;
}

.topbar-inner[b-mpdbtsvgdi] {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
}

    .topbar-inner .topbar-cube[b-mpdbtsvgdi] {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .topbar-inner .user-menu[b-mpdbtsvgdi] {
        flex: 0 0 auto;
        margin-left: auto;
    }

.topbar-title[b-mpdbtsvgdi] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    padding-left: 12px;
}

    .topbar-title span[b-mpdbtsvgdi] {
        font-weight: 600;
        font-size: 15px;
    }

    .topbar-title small[b-mpdbtsvgdi] {
        color: #94a3b8;
        font-size: 12px;
    }

/* Cub 3D distribuit a la topbar negra */
.topbar-cube[b-mpdbtsvgdi] {
    width: 36px;
    height: 36px;
    perspective: 200px;
    flex: 0 0 auto;
}

.topbar-cube-3d[b-mpdbtsvgdi] {
    width: 36px;
    height: 36px;
    position: relative;
    transform-style: preserve-3d;
    animation: topbarCubeRotate-b-mpdbtsvgdi 14s ease-in-out infinite;
}

.topbar-cube-face[b-mpdbtsvgdi] {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

    .topbar-cube-face img[b-mpdbtsvgdi] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 2px;
    }

.topbar-cube-front[b-mpdbtsvgdi]  { transform: rotateY(0deg)    translateZ(18px); }
.topbar-cube-back[b-mpdbtsvgdi]   { transform: rotateY(180deg)  translateZ(18px); }
.topbar-cube-right[b-mpdbtsvgdi]  { transform: rotateY(90deg)   translateZ(18px); }
.topbar-cube-left[b-mpdbtsvgdi]   { transform: rotateY(-90deg)  translateZ(18px); }
.topbar-cube-top[b-mpdbtsvgdi]    { transform: rotateX(90deg)   translateZ(18px); }
.topbar-cube-bottom[b-mpdbtsvgdi] { transform: rotateX(-90deg)  translateZ(18px); }

@keyframes topbarCubeRotate-b-mpdbtsvgdi {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

/* ─── Topbar anterior (search-bar) ──────────────────────────── */
.search-bar[b-mpdbtsvgdi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* ─── Botó ACTUALITZAR ───────────────────────────────────────── */
.update-button[b-mpdbtsvgdi] {
    height: 38px;
    min-width: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: #16a34a;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
}

    .update-button:hover:not(:disabled)[b-mpdbtsvgdi] {
        background: #15803d;
    }

    .update-button:disabled[b-mpdbtsvgdi] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.update-button-label[b-mpdbtsvgdi] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ─── Botó Parar ─────────────────────────────────────────────── */
.stop-button[b-mpdbtsvgdi] {
    height: 38px;
    min-width: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
}

    .stop-button:hover:not(:disabled)[b-mpdbtsvgdi] {
        background: #dc2626;
    }

    .stop-button:disabled[b-mpdbtsvgdi] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ─── Secció de botons ACTUALITZAR + Parar (sobre programació) ─ */
.update-buttons-section[b-mpdbtsvgdi] {
    background: #f0f9ff;
    border-top: 1px solid #bfdbfe;
    margin-bottom: 0;
}

.update-buttons-row[b-mpdbtsvgdi] {
    display: flex;
    gap: 10px;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
}

    .update-buttons-row .update-button[b-mpdbtsvgdi],
    .update-buttons-row .stop-button[b-mpdbtsvgdi] {
        flex: 0 0 auto;
    }

/* ─── Badge usuari ───────────────────────────────────────────── */
.user-menu[b-mpdbtsvgdi] {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.user-badge[b-mpdbtsvgdi] {
    padding: 6px 12px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

    .user-badge:hover[b-mpdbtsvgdi] {
        background: rgba(255,255,255,0.25);
        border-color: rgba(255,255,255,0.5);
    }

/* ─── Badge usuari antic (keepin per compatibilitat) ───────── */
.user-menu[b-mpdbtsvgdi] {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.user-badge[b-mpdbtsvgdi] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .user-badge:hover[b-mpdbtsvgdi] {
        background: #0b5f59;
    }

/* ─── Àrea central ───────────────────────────────────────────── */
.center-area[b-mpdbtsvgdi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.stacked-boxes[b-mpdbtsvgdi] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 720px;
}

/* ─── Blocs d'estat ──────────────────────────────────────────── */
.status-box[b-mpdbtsvgdi] {
    min-width: 320px;
    max-width: 720px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    padding: 28px;
    text-align: center;
    color: #1e293b;
    font-weight: 600;
}

.status-error[b-mpdbtsvgdi] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.status-blocked[b-mpdbtsvgdi] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.status-title[b-mpdbtsvgdi] {
    font-size: 14px;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.status-caption[b-mpdbtsvgdi] {
    font-size: 13px;
    color: #64748b;
}

/* ─── Bloc de programació ────────────────────────────────────── */
.schedule-box[b-mpdbtsvgdi] {
    max-width: 720px;
    text-align: center;
    padding: 20px;
}

.schedule-row[b-mpdbtsvgdi] {
    display: grid;
    grid-template-columns: 160px 120px 90px;
    align-items: center;
    gap: 10px;
    margin: 8px auto 0;
    width: fit-content;
}

.schedule-label[b-mpdbtsvgdi] {
    font-size: 13px;
    color: #334155;
    font-weight: 700;
    text-align: left;
}

.schedule-time-text[b-mpdbtsvgdi] {
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 14px;
    width: 120px;
    text-align: center;
}

.schedule-clear[b-mpdbtsvgdi] {
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
    padding: 0 10px;
}

    .schedule-clear:hover[b-mpdbtsvgdi] {
        background: #e2e8f0;
    }

/* ─── Fila de dies de la setmana ─────────────────────────────── */
.schedule-days-row[b-mpdbtsvgdi] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px auto 10px;
    width: fit-content;
}

.schedule-days-label[b-mpdbtsvgdi] {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    width: 46px;
    text-align: left;
}

.schedule-day-item[b-mpdbtsvgdi] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 3px 7px;
    user-select: none;
}

    .schedule-day-item input[type="checkbox"][b-mpdbtsvgdi] {
        accent-color: #2563eb;
        cursor: pointer;
        width: 13px;
        height: 13px;
    }

.schedule-days-note[b-mpdbtsvgdi] {
    font-size: 11px;
    color: #94a3b8;
    margin: 6px auto 0;
    text-align: center;
}

/* ─── Botó Guardar programació ───────────────────────────────── */
.schedule-actions[b-mpdbtsvgdi] {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.schedule-save[b-mpdbtsvgdi] {
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    padding: 0 20px;
    cursor: pointer;
    font-size: 14px;
}

    .schedule-save:hover:not(:disabled)[b-mpdbtsvgdi] {
        background: #1d4ed8;
    }

    .schedule-save:disabled[b-mpdbtsvgdi] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ─── Spinner ────────────────────────────────────────────────── */
.spinner[b-mpdbtsvgdi] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-mpdbtsvgdi 0.6s linear infinite;
}

@keyframes spin-b-mpdbtsvgdi {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/PowerBiInformes.razor.rz.scp.css */
/* ===========================================================
   PowerBiInformes.razor.css — Fase12
   -----------------------------------------------------------
   Mateixa estructura visual que Home.razor.css i Documents.
   Diferència: el cos central conté un <div> que el SDK JS
   `powerbi-client` omple amb un iframe de Power BI.
   =========================================================== */

.pbi-layout[b-kbjuic1hye] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Sidebar esquerra (igual que Home/Documents) ===== */
.pbi-sidebar[b-kbjuic1hye] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.pbi-sidebar-brand[b-kbjuic1hye] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
    cursor: pointer;
    outline: none;
}

    .pbi-sidebar-brand:hover .pbi-logo-cube[b-kbjuic1hye] {
        filter: brightness(1.15);
    }

.pbi-logo-cube[b-kbjuic1hye] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiCubeRotate-b-kbjuic1hye 16s ease-in-out infinite;
}

/* Cares del cub */
.cube-face[b-kbjuic1hye] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-kbjuic1hye] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-kbjuic1hye]  { transform: rotateY(0deg)    translateZ(20px); }
.cube-back[b-kbjuic1hye]   { transform: rotateY(180deg)  translateZ(20px); }
.cube-right[b-kbjuic1hye]  { transform: rotateY(90deg)   translateZ(20px); }
.cube-left[b-kbjuic1hye]   { transform: rotateY(-90deg)  translateZ(20px); }
.cube-top[b-kbjuic1hye]    { transform: rotateX(90deg)   translateZ(20px); }
.cube-bottom[b-kbjuic1hye] { transform: rotateX(-90deg)  translateZ(20px); }

@keyframes pbiCubeRotate-b-kbjuic1hye {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

.pbi-sidebar-icon[b-kbjuic1hye] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .pbi-sidebar-icon:hover[b-kbjuic1hye] {
        background: #334155;
        color: #e2e8f0;
    }

    .pbi-sidebar-icon.active[b-kbjuic1hye] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .pbi-sidebar-icon.active:hover[b-kbjuic1hye] {
        background: #2563eb;
        color: #fff;
    }

    .pbi-sidebar-icon.current[b-kbjuic1hye] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

/* ===== Àrea principal dreta ===== */
.pbi-main[b-kbjuic1hye] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    overflow: hidden;
}

.pbi-topbar[b-kbjuic1hye] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
    height: 56px;
    color: #e2e8f0;
}

.pbi-title[b-kbjuic1hye] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Badge usuari (idèntic a Home) */
.pbi-user-menu[b-kbjuic1hye] {
    position: relative;
    display: flex;
    align-items: center;
}

.pbi-user-menu[b-kbjuic1hye]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.pbi-user-badge[b-kbjuic1hye] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.5px;
}

    .pbi-user-badge:hover[b-kbjuic1hye] {
        background: #0d9488;
        transform: scale(1.05);
    }

.pbi-user-dropdown[b-kbjuic1hye] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 170px;
    z-index: 200;
    overflow: hidden;
}

.pbi-user-menu:hover .pbi-user-dropdown[b-kbjuic1hye],
.pbi-user-menu:focus-within .pbi-user-dropdown[b-kbjuic1hye] {
    display: block;
}

.pbi-user-name[b-kbjuic1hye] {
    padding: 12px 16px 4px;
    font-size: 13px;
    color: #475569;
}

.pbi-user-mail[b-kbjuic1hye] {
    padding: 0 16px 8px;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
}

.pbi-user-action[b-kbjuic1hye] {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #1e293b;
}

    .pbi-user-action:hover[b-kbjuic1hye] {
        background: #f1f5f9;
    }

/* ===== Cos central: contenidor de l'informe ===== */
.pbi-center[b-kbjuic1hye] {
    flex: 1;
    position: relative;
    background: #0f172a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pbi-message[b-kbjuic1hye] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.85);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 5;
}

    .pbi-message.pbi-error[b-kbjuic1hye] {
        background: rgba(220, 38, 38, 0.9);
    }

.pbi-report-host[b-kbjuic1hye] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;
}

    /* El SDK Power BI injecta un <iframe>; forcem que ompli el contenidor */
    .pbi-report-host iframe[b-kbjuic1hye] {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
    }

/* ===== Cub gran giratori (bloc central) ===== */
.pbi-big-cube-wrap[b-kbjuic1hye] {
    width: 440px;
    height: 440px;
    perspective: 1000px;
    cursor: pointer;
}

    .pbi-big-cube-wrap:hover .pbi-big-cube[b-kbjuic1hye] {
        filter: drop-shadow(0 0 48px rgba(59,130,246,0.38));
    }

.pbi-big-cube[b-kbjuic1hye] {
    width: 440px;
    height: 440px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiBigCubeRotate-b-kbjuic1hye 14s ease-in-out infinite;
}

.big-cube-face[b-kbjuic1hye] {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.big-cube-logo[b-kbjuic1hye] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 28px;
}

.big-cube-front[b-kbjuic1hye]  { transform: rotateY(0deg)    translateZ(220px); }
.big-cube-back[b-kbjuic1hye]   { transform: rotateY(180deg)  translateZ(220px); }
.big-cube-right[b-kbjuic1hye]  { transform: rotateY(90deg)   translateZ(220px); }
.big-cube-left[b-kbjuic1hye]   { transform: rotateY(-90deg)  translateZ(220px); }
.big-cube-top[b-kbjuic1hye]    { transform: rotateX(90deg)   translateZ(220px); }
.big-cube-bottom[b-kbjuic1hye] { transform: rotateX(-90deg)  translateZ(220px); }

@keyframes pbiBigCubeRotate-b-kbjuic1hye {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(10deg)   rotateY(72deg); }
    40%  { transform: rotateX(-7deg)   rotateY(144deg); }
    60%  { transform: rotateX(9deg)    rotateY(216deg); }
    80%  { transform: rotateX(-5deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

@media (max-width: 767px) {
    .pbi-big-cube-wrap[b-kbjuic1hye] {
        width: 260px;
        height: 260px;
        perspective: 600px;
    }

    .pbi-big-cube[b-kbjuic1hye] {
        width: 260px;
        height: 260px;
    }

    .big-cube-front[b-kbjuic1hye]  { transform: rotateY(0deg)    translateZ(130px); }
    .big-cube-back[b-kbjuic1hye]   { transform: rotateY(180deg)  translateZ(130px); }
    .big-cube-right[b-kbjuic1hye]  { transform: rotateY(90deg)   translateZ(130px); }
    .big-cube-left[b-kbjuic1hye]   { transform: rotateY(-90deg)  translateZ(130px); }
    .big-cube-top[b-kbjuic1hye]    { transform: rotateX(90deg)   translateZ(130px); }
    .big-cube-bottom[b-kbjuic1hye] { transform: rotateX(-90deg)  translateZ(130px); }
}
/* /Components/Pages/Teams.razor.rz.scp.css */
/* Reutilitza l'estructura visual de PowerBiInformes per mantenir coherència */
/* ===========================================================
   Teams.razor.css — Fase13
   Mateixa estructura visual que PowerBiInformes.razor.css
   =========================================================== */

.pbi-layout[b-8ydglw9eps] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pbi-sidebar[b-8ydglw9eps] {
    width: 52px;
    min-width: 52px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
}

.pbi-sidebar-brand[b-8ydglw9eps] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    perspective: 200px;
    cursor: pointer;
    outline: none;
}

.pbi-logo-cube[b-8ydglw9eps] {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiCubeRotate-b-8ydglw9eps 16s ease-in-out infinite;
}

.cube-face[b-8ydglw9eps] {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.cube-logo[b-8ydglw9eps] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.cube-front[b-8ydglw9eps]  { transform: rotateY(0deg)    translateZ(20px); }
.cube-back[b-8ydglw9eps]   { transform: rotateY(180deg)  translateZ(20px); }
.cube-right[b-8ydglw9eps]  { transform: rotateY(90deg)   translateZ(20px); }
.cube-left[b-8ydglw9eps]   { transform: rotateY(-90deg)  translateZ(20px); }
.cube-top[b-8ydglw9eps]    { transform: rotateX(90deg)   translateZ(20px); }
.cube-bottom[b-8ydglw9eps] { transform: rotateX(-90deg)  translateZ(20px); }

@keyframes pbiCubeRotate-b-8ydglw9eps {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(12deg)   rotateY(72deg); }
    40%  { transform: rotateX(-8deg)   rotateY(144deg); }
    60%  { transform: rotateX(10deg)   rotateY(216deg); }
    80%  { transform: rotateX(-6deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

.pbi-sidebar-icon[b-8ydglw9eps] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

    .pbi-sidebar-icon:hover[b-8ydglw9eps] {
        background: #334155;
        color: #e2e8f0;
    }

    .pbi-sidebar-icon.active[b-8ydglw9eps] {
        background: #3b82f6;
        color: #fff;
        cursor: pointer;
    }

    .pbi-sidebar-icon.active:hover[b-8ydglw9eps] {
        background: #2563eb;
        color: #fff;
    }

    .pbi-sidebar-icon.current[b-8ydglw9eps] {
        background: #f97316;
        color: #fff;
        cursor: default;
    }

.pbi-main[b-8ydglw9eps] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    overflow: hidden;
}

.pbi-topbar[b-8ydglw9eps] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
    height: 56px;
    color: #e2e8f0;
}

.pbi-title[b-8ydglw9eps] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.pbi-user-menu[b-8ydglw9eps] {
    position: relative;
    display: flex;
    align-items: center;
}

.pbi-user-menu[b-8ydglw9eps]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.pbi-user-badge[b-8ydglw9eps] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.5px;
}

    .pbi-user-badge:hover[b-8ydglw9eps] {
        background: #0d9488;
        transform: scale(1.05);
    }

.pbi-user-dropdown[b-8ydglw9eps] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 170px;
    z-index: 200;
    overflow: hidden;
}

.pbi-user-menu:hover .pbi-user-dropdown[b-8ydglw9eps],
.pbi-user-menu:focus-within .pbi-user-dropdown[b-8ydglw9eps] {
    display: block;
}

.pbi-user-name[b-8ydglw9eps] {
    padding: 12px 16px 4px;
    font-size: 13px;
    color: #475569;
}

.pbi-user-mail[b-8ydglw9eps] {
    padding: 0 16px 8px;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
}

.pbi-user-action[b-8ydglw9eps] {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #1e293b;
}

    .pbi-user-action:hover[b-8ydglw9eps] {
        background: #f1f5f9;
    }

.pbi-center[b-8ydglw9eps] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    overflow: hidden;
}

.pbi-big-cube-wrap[b-8ydglw9eps] {
    width: 440px;
    height: 440px;
    perspective: 1000px;
    cursor: pointer;
}

    .pbi-big-cube-wrap:hover .pbi-big-cube[b-8ydglw9eps] {
        filter: drop-shadow(0 0 48px rgba(59,130,246,0.38));
    }

.pbi-big-cube[b-8ydglw9eps] {
    width: 440px;
    height: 440px;
    position: relative;
    transform-style: preserve-3d;
    animation: pbiBigCubeRotate-b-8ydglw9eps 14s ease-in-out infinite;
}

.big-cube-face[b-8ydglw9eps] {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    overflow: hidden;
}

.big-cube-logo[b-8ydglw9eps] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 28px;
}

.big-cube-front[b-8ydglw9eps]  { transform: rotateY(0deg)    translateZ(220px); }
.big-cube-back[b-8ydglw9eps]   { transform: rotateY(180deg)  translateZ(220px); }
.big-cube-right[b-8ydglw9eps]  { transform: rotateY(90deg)   translateZ(220px); }
.big-cube-left[b-8ydglw9eps]   { transform: rotateY(-90deg)  translateZ(220px); }
.big-cube-top[b-8ydglw9eps]    { transform: rotateX(90deg)   translateZ(220px); }
.big-cube-bottom[b-8ydglw9eps] { transform: rotateX(-90deg)  translateZ(220px); }

@keyframes pbiBigCubeRotate-b-8ydglw9eps {
    0%   { transform: rotateX(0deg)    rotateY(0deg); }
    20%  { transform: rotateX(10deg)   rotateY(72deg); }
    40%  { transform: rotateX(-7deg)   rotateY(144deg); }
    60%  { transform: rotateX(9deg)    rotateY(216deg); }
    80%  { transform: rotateX(-5deg)   rotateY(288deg); }
    100% { transform: rotateX(0deg)    rotateY(360deg); }
}

@media (max-width: 767px) {
    .pbi-big-cube-wrap[b-8ydglw9eps] {
        width: 260px;
        height: 260px;
        perspective: 600px;
    }

    .pbi-big-cube[b-8ydglw9eps] {
        width: 260px;
        height: 260px;
    }

    .big-cube-front[b-8ydglw9eps]  { transform: rotateY(0deg)    translateZ(130px); }
    .big-cube-back[b-8ydglw9eps]   { transform: rotateY(180deg)  translateZ(130px); }
    .big-cube-right[b-8ydglw9eps]  { transform: rotateY(90deg)   translateZ(130px); }
    .big-cube-left[b-8ydglw9eps]   { transform: rotateY(-90deg)  translateZ(130px); }
    .big-cube-top[b-8ydglw9eps]    { transform: rotateX(90deg)   translateZ(130px); }
    .big-cube-bottom[b-8ydglw9eps] { transform: rotateX(-90deg)  translateZ(130px); }
}