/* ── Overlay ── */
.up-overlay { display:none; position:fixed; inset:0; z-index:299; }
.up-overlay.show { display:block; }

/* ── Popover ── */
.user-popover {
    position: fixed;
    bottom: 20px;
    left: 80px;
    width: 240px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-secondary, #eaecf0);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    z-index: 300;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(.97);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.user-popover.show { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }

.up-header { display:flex; align-items:center; gap:12px; padding:16px 16px 14px; }
.up-avatar {
    width:38px; height:38px; border-radius:50%;
    background:var(--accent, #1a73e8); color:#fff;
    font-size:15px; font-weight:800;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    overflow:hidden; contain:paint;
}
.up-avatar img {
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:cover;
    border-radius:50%;
    display:block;
}
.up-info { display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.up-name  { font-size:13px; font-weight:700; color:var(--text-primary,#0d1117); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.up-email { font-size:11px; color:var(--text-tertiary,#99a0ab); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.up-divider { height:1px; background:var(--border-secondary,#eaecf0); margin:4px 0; }

.up-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 16px; font-size:13px; font-weight:600;
    color:var(--text-primary,#0d1117); text-decoration:none !important;
    background:none; border:none; width:100%;
    text-align:left; cursor:pointer;
    font-family:inherit; transition:background .12s;
}
.up-item:hover { background:var(--bg-secondary,#f7f8fa); text-decoration:none !important; }
.up-kbd {
    margin-left:auto; font-size:10px; color:var(--text-tertiary,#99a0ab);
    background:var(--bg-tertiary,#eef0f3); padding:2px 6px;
    border-radius:5px; font-family:monospace;
}
.up-admin { color:#ea580c !important; }
.up-admin:hover { background:rgba(234,88,12,.08) !important; }
.up-item-logout { color:var(--red,#dc2626) !important; }
.up-item-logout:hover { background:var(--red-light,rgba(220,38,38,.1)) !important; }

/* ── Footer bar ── */
.app-footer {
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-secondary, #eaecf0);
    height: 52px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;
    margin-top: auto;
}
.footer-user { display:flex; align-items:center; gap:8px; cursor:pointer; }
.footer-avatar {
    width:28px; height:28px; border-radius:50%;
    background:var(--accent,#1a73e8); color:#fff;
    font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    transition: transform .15s;
}
.footer-user:hover .footer-avatar { transform: scale(1.08); }
.footer-name { font-size:12px; color:var(--text-secondary,#5c6370); font-weight:500; }
.footer-name b { color:var(--text-primary,#0d1117); font-weight:700; }

/* ── Footer Nav (centro, estilo Windows 11) ── */
.footer-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary, #f7f8fa);
    border: 1px solid var(--border-secondary, #eaecf0);
    border-radius: 12px;
    padding: 4px;
}
.footer-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #5c6370);
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.footer-nav-item:hover {
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #0d1117);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    text-decoration: none !important;
}
.footer-nav-item.active {
    background: var(--bg-primary, #fff);
    color: var(--accent, #1a73e8);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.footer-nav-icon { font-size: 14px; }