/* NAVBAR INTELIGENTE SUAVE */
.sticky-header-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%;
    z-index: 10; 
    background: rgba(0, 0, 0, 0.75); 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

header { padding: 12px 20px; }
.header-content { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.header-search { flex-grow: 1; display: flex; align-items: center; background: rgba(255,255,255,0.1); border-radius: 20px; padding: 8px 15px; }
.header-search input { background: transparent; border: none; color: white; margin-left: 10px; width: 100%; font-size: 14px; }
.header-search input::placeholder { color: rgba(255,255,255,0.5); }
.header-search span { font-size: 20px; opacity: 0.7; }

#sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 50; background: rgba(10, 10, 10, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(255, 255, 255, 0.1); transform: translateX(-100%); display: flex; flex-direction: column; }
.sidebar-content { padding: 25px 20px; overflow-y: auto; flex-grow: 1; }

.sidebar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.note-counter-large { font-size: 24px; font-weight: 300; color: rgba(255,255,255,0.9); margin: 0; line-height: 1; display: flex; align-items: center; }

.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; color: white; padding: 12px; border-radius: 8px; cursor: pointer; text-align: left; margin-bottom: 5px; opacity: 0.7; transition: opacity 0.2s, background 0.2s; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,0.1); opacity: 1; }
.tags-title { font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin: 25px 0 10px 12px; }

#sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 40; display: none; cursor: pointer; user-select: none; }

#dashboard { 
    padding: 10px; 
    padding-top: 130px; /* Margen perfecto para que no lo tape el header */
    padding-bottom: 90px; 
}
#dashboard.grid-view { display: block; column-count: 2; column-gap: 10px; }
#dashboard.list-view { display: flex; flex-direction: column; gap: 10px; }

.empty-state-container { column-span: all; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 40px; text-align: center; }
.empty-state { font-size: 16px; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; }