html,body{color:#000;background-color:#cfcfcf;margin:0;padding:0;font-family:Arial,sans-serif}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:#ce7b00;background-clip:content-box;border:2px solid transparent;border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:#c48526}*{scrollbar-width:thin;scrollbar-color:#ce7b00 transparent}#root,.App,main{flex-direction:column;min-height:100vh;display:flex}body{color:#111;background:#fff}body,.header,.footerMenu,.modalBox,.search{transition:background .3s,color .3s}body.dark{color:#ccc;background:#121212}body.dark .diagrama{filter:invert()}body.dark .header{background:#121212}body.dark p{color:#ccc}body.dark .favoriteButton{background:#fff}body.dark .footerMenu{background:#121212}body.dark .modalBox{color:#ccc;background:#121212}body.dark .secondaryButton{background:#333334}body.dark .modalBox h2,body.dark .modalBox p,body.dark .modalBox span,body.dark .modalBox svg{color:#ccc}body.dark .search{color:#fff;background:#333334}body.dark .bgChords{background-color:rgba(18,18,18,.86)!important}body.dark .loaderOverlay{background:#333334}*{box-sizing:border-box;color:inherit;text-decoration:none}.container{flex-direction:column;width:100%;padding-top:70px;padding-bottom:70px;display:flex}.content{box-sizing:border-box;width:100%;max-width:975px;margin:0 auto;padding:0 16px}.header{z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(0,0,0,.8);border-bottom:1px solid rgba(255,255,255,.1);width:100%;height:60px;transition:transform .2s;position:fixed;top:0;left:0;box-shadow:0 2px 4px rgba(0,0,0,.2)}.headerHidden{transform:translateY(-100%)}.header .content{justify-content:space-between;align-items:center;gap:1rem;height:100%;display:flex}.logo img{width:7rem}.searchContainer{flex:1;min-width:0;margin:0 1rem;position:relative}.search{color:#000;border:1px solid #ccc;border-radius:6px;width:100%;padding:.4rem .6rem;font-size:1rem}.suggestions li{border-bottom:1px solid #eee}.suggestions li:last-child{border-bottom:none}.suggestionItem{align-items:center;padding:.5rem;transition:background .2s;display:flex}.suggestionItem:hover{background-color:#3a3a3a}.suggestionCover{object-fit:cover;border-radius:4px;flex-shrink:0;width:40px;height:40px;margin-right:.75rem}.suggestionInfo{color:#333;flex-direction:column;font-size:.9rem;display:flex}.suggestionTitle{margin-bottom:2px;font-size:.95rem;font-weight:700}.suggestionAlbum{color:#777;font-size:.8rem}.suggestionTag{border-radius:4px;margin-left:auto;padding:.2rem .5rem;font-size:.75rem;font-weight:700}.suggestionTag.musica{color:#1565c0;background:#e3f2fd}.suggestionTag.album{color:#6a1b9a;background:#f3e5f5}.userMenu{display:inline-block;position:relative}.dropdown{z-index:999;background:#fff;border-radius:8px;flex-direction:column;min-width:160px;padding:8px 0;display:flex;position:absolute;top:50px;right:0;box-shadow:0 4px 12px rgba(0,0,0,.2)}.dropdown a,.dropdown button{text-align:left;cursor:pointer;color:#333;background:0 0;border:none;width:100%;padding:10px 16px;font-size:14px}.dropdown a:hover,.dropdown button:hover{background:#f3f3f3}.menuBtn{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;padding:0;display:flex;overflow:hidden}.userAvatar{object-fit:cover;border-radius:50%;width:100%;height:100%}.desktopMenuOptions{align-items:center;gap:1rem;display:none}.titleList{align-items:center;margin-bottom:0;display:flex}.footerMenu{z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(0,0,0,.8);border-bottom:1px solid rgba(255,255,255,.1);justify-content:space-around;align-items:center;width:100%;height:60px;display:flex;position:fixed;bottom:0;left:0;box-shadow:0 2px 4px rgba(0,0,0,.2)}.footerBtn{color:#fff;align-items:center;padding:.4rem .6rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:background .2s,color .2s;display:flex}.footerBtn:hover{background:#222;border-radius:6px}@media (min-width:768px){.footerMenu{display:none}.searchContainer{max-width:600px}.desktopMenuOptions{display:flex}}@media (max-width:767px){.desktopMenuOptions{display:none}.searchContainer{flex:1;margin-right:.5rem}.content{max-width:100%;padding:0 12px}.header .content{gap:.2rem}.logo img{width:4rem}}.modalOverlay{z-index:50;background:rgba(0,0,0,.55);justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modalBox{background:#fff;border-radius:14px;width:90%;max-width:420px;padding:24px;animation:.25s ease-out fadeIn;position:relative;box-shadow:0 6px 20px rgba(0,0,0,.25)}.closeButton{cursor:pointer;color:#666;background:0 0;border:none;position:absolute;top:12px;right:12px}.modalTitle{color:#000;margin:0;font-size:20px;font-weight:600}.modalSubtitle{color:#666;margin:4px 0 20px;font-size:14px}.modalOption{justify-content:space-between;align-items:center;margin:14px 0;display:flex}.modalLabel{color:#333;align-items:center;gap:8px;font-size:15px;display:flex}.secondaryButton{cursor:pointer;background:#f5f5f5;border:1px solid #ccc;border-radius:6px;padding:6px 12px}.secondaryButton:hover{background:#e8e8e8}.dangerButton{color:#fff;cursor:pointer;background:#e53935;border:none;border-radius:6px;padding:6px 12px}.dangerButton:hover{background:#c62828}.switch{width:44px;height:22px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ccc;border-radius:22px;transition:all .3s;position:absolute;top:0;bottom:0;left:0;right:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;bottom:2px;left:2px}.switch input:checked+.slider{background-color:#ce7b00}.switch input:checked+.slider:before{transform:translate(22px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.loaderOverlayBusca{top:15dppx;z-index:9999;justify-content:center;align-items:center;width:5vw;height:5vh;margin:0 auto;display:flex;position:fixed;left:0;right:0}.soundWaveBusca{align-items:center;gap:3px;height:20px;display:flex}.soundWaveBusca span{background:#ce7b00;border-radius:4px;width:3px;height:5px;margin:0 auto;animation:1s infinite bounce;display:block}.soundWaveBusca span:first-child{animation-delay:0s}.soundWaveBusca span:nth-child(2){animation-delay:.1s}.soundWaveBusca span:nth-child(3){animation-delay:.2s}.soundWaveBusca span:nth-child(4){animation-delay:.3s}.soundWaveBusca span:nth-child(5){animation-delay:.4s}@keyframes bounce{0%,to{height:10px}50%{height:40px}}.loaderOverlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.soundWave{align-items:flex-end;gap:6px;height:40px;display:flex}.soundWave span{background:#ce7b00;border-radius:4px;width:6px;height:10px;animation:1s infinite bounce;display:block}.soundWave span:first-child{animation-delay:0s}.soundWave span:nth-child(2){animation-delay:.1s}.soundWave span:nth-child(3){animation-delay:.2s}.soundWave span:nth-child(4){animation-delay:.3s}.soundWave span:nth-child(5){animation-delay:.4s}.modalOverlay{z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modalContainer{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:rgba(0,0,0,.5);border:1px solid #ccc;border-radius:1rem;width:100%;max-width:400px;padding:2rem;animation:.3s fadeIn;box-shadow:0 8px 25px rgba(0,0,0,.25)}.modalContainer.dark{color:#f5f5f5;background:#1f1f1f}.modalTitle{text-align:center;color:#333334;margin-bottom:1rem;font-size:1.3rem;font-weight:600}.modalInput{border:1px solid #ccc;border-radius:.6rem;width:100%;margin-bottom:.8rem;padding:.7rem 1rem;font-size:.95rem;transition:border .2s}.modalContainer.dark .modalInput{color:#fff;background:#2b2b2b;border:1px solid #444}.modalInput:focus{border-color:#ce7b00;outline:none}.strengthMeter{background:#e0e0e0;border-radius:4px;width:100%;height:6px;margin:.5rem 0;overflow:hidden}.strengthBar{height:100%;transition:width .3s}.strengthBar.fraca{background:#e74c3c}.strengthBar.media{background:#f39c12}.strengthBar.forte{background:#27ae60}.strengthLabel{text-align:right;opacity:.8;color:#fff;margin-bottom:1rem;font-size:.85rem}.modalActions{justify-content:space-between;gap:.8rem;display:flex}.cancelBtn,.confirmBtn{border-radius:.6rem;flex:1;padding:.7rem;font-weight:500;transition:all .2s}.cancelBtn{color:#333;background:#e0e0e0}.modalContainer.dark .cancelBtn{color:#f5f5f5;background:#444}.cancelBtn:hover{background:#d5d5d5}.confirmBtn{color:#fff;background:#ce7b00;border:none}.confirmBtn:disabled{opacity:.6;cursor:not-allowed}.confirmBtn:hover:not(:disabled){background:#0056b3}.tone-buttons-container{flex-wrap:wrap;justify-content:flex-start;gap:16px;margin:20px 0;display:flex}.tone-button{text-transform:uppercase;cursor:pointer;color:#fff;background:linear-gradient(135deg,#f6d365,#ce7b00);border:none;border-radius:12px;flex:120px;max-width:180px;padding:18px 24px;font-size:1.2rem;font-weight:600;transition:all .3s;box-shadow:0 6px 15px rgba(0,0,0,.15)}.tone-button:hover{background:linear-gradient(135deg,#fbcf9c,#ce7b00);transform:translateY(-3px)scale(1.05);box-shadow:0 10px 20px rgba(0,0,0,.25)}.tone-button:active{transform:translateY(0)scale(.98);box-shadow:0 5px 10px rgba(0,0,0,.2)}.menu-button{z-index:1001;cursor:pointer;filter:blur(4px);color:#fff;background:#ce7b00;border:none;border-radius:6px;padding:10px 15px;font-size:20px;position:fixed;top:15px;left:15px}.overlay{filter:blur(5px);top:0;left:0;z-index:1000;background:rgba(0,0,0,.5);width:100vw;height:100vh;position:fixed;top:0;bottom:0;left:0;right:0;overflow-y:hidden}.sidebar{-webkit-backdrop-filter:blur(12px);color:#f1f1f1;z-index:1001;background:rgba(18,18,18,.8);flex-direction:column;justify-content:space-between;width:280px;height:100vh;padding:20px;transition:right .3s;display:flex;position:absolute;top:0;right:-280px;box-shadow:-2px 0 10px rgba(0,0,0,.4)}.no-scroll{width:100%;position:fixed;overflow:hidden}.sidebar.open{right:0}.sidebar-header{text-align:center;margin-bottom:20px}.sidebar-header .logo{max-width:140px;height:auto}.sidebar-nav{flex-direction:column;flex-grow:1;gap:15px;display:flex}.sidebar-nav a{color:#f1f1f1;border-radius:8px;align-items:center;gap:10px;padding:8px 12px;font-size:16px;text-decoration:none;transition:background .2s;display:flex}.sidebar-nav a:hover{background:rgba(255,255,255,.1)}.sidebar-footer{flex-direction:column;gap:10px;margin-bottom:30px;font-size:14px;display:flex}.sidebar-footer a{color:#ddd;align-items:center;gap:8px;font-size:13px;text-decoration:none;display:flex}.sidebar-footer a:hover{text-decoration:underline}.sidebar-footer .logout{align-items:center;gap:8px;margin-bottom:10px;display:flex}.dangerButton{color:#ff4d4f;cursor:pointer;background:0 0;border:none;font-size:14px}.dangerButton:hover{text-decoration:underline}.version{color:#aaa;font-size:12px}.version a{color:#aaa;text-decoration:underline}.menu-button{z-index:1100;cursor:pointer;color:#fff;background:#007bff;border:none;border-radius:6px;padding:10px 15px;font-size:20px;position:fixed;top:15px;left:15px}@media print{body{background:#fff;margin:0}.no-print{display:none!important}.only-print{display:block!important}body.dark img{filter:none!important;margin-top:-20px!important}}@media screen{.only-print{display:none!important}}