*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#09090b;color:#fff;min-height:100vh;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(113,113,122,.5);border-radius:3px}
input,textarea,button{font-family:inherit}
.page{display:none;min-height:100vh;padding-bottom:80px;background:linear-gradient(135deg,#09090b,#18181b 50%,#09090b)}
.page.active{display:block}
.header{position:sticky;top:0;z-index:10;background:rgba(9,9,11,.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(39,39,42,.5);padding:10px 12px;padding-top:max(44px,calc(10px + env(safe-area-inset-top,0px)))}
.header-inner{max-width:56rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.header-title{font-size:1.125rem;font-weight:700;color:#fff}
.header-sub{font-size:.7rem;color:#71717a}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:600;font-size:.8rem;transition:all .2s;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.95)}
.btn-amber{background:#f59e0b;color:#000}.btn-amber:hover{background:#fbbf24}
.btn-zinc{background:#3f3f46;color:#fff}.btn-zinc:hover{background:#52525b}
.btn-sm{padding:5px 10px;font-size:.75rem;border-radius:8px}
.btn-icon{padding:6px;border-radius:8px;border:none;cursor:pointer;transition:all .2s;background:transparent;color:#a1a1aa;display:flex;align-items:center;justify-content:center}
.btn-icon:hover{color:#f59e0b;background:rgba(245,158,11,.1)}
.btn-icon-red:hover{color:#f87171;background:rgba(248,113,113,.1)}
.input{width:100%;padding:8px 12px;border-radius:10px;border:1px solid rgba(63,63,70,.5);background:rgba(39,39,42,.5);color:#fff;font-size:.8rem;outline:none;transition:all .2s}
.input:focus{box-shadow:0 0 0 2px rgba(245,158,11,.5);border-color:rgba(245,158,11,.5)}
.input::placeholder{color:#71717a}
.textarea{min-height:220px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.5}
.label{display:block;font-size:.8rem;font-weight:500;color:#a1a1aa;margin-bottom:4px}
.card{background:rgba(39,39,42,.5);border:1px solid rgba(63,63,70,.5);border-radius:12px;padding:12px;cursor:pointer;transition:all .3s}
.card:hover{background:#27272a;border-color:rgba(245,158,11,.3)}
.card-title{font-weight:600;color:#fff;display:flex;align-items:center;gap:6px;margin-bottom:2px;font-size:.9rem}
.card-artist{font-size:.8rem;color:#a1a1aa}
.card-preview{font-size:.7rem;color:#71717a;margin-top:6px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.tag{font-size:.65rem;padding:2px 6px;border-radius:4px;font-family:monospace}
.tag-key{background:rgba(245,158,11,.2);color:#fbbf24}
.tag-zinc{background:#3f3f46;color:#a1a1aa}
.tag-list{display:flex;align-items:center;gap:2px;font-size:.65rem;color:#71717a}
.empty{text-align:center;padding:60px 16px}
.empty-icon{width:64px;height:64px;background:#27272a;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.empty h2{font-size:1rem;font-weight:600;color:#a1a1aa;margin-bottom:6px}
.empty p{font-size:.8rem;color:#71717a;margin-bottom:20px}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(9,9,11,.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(39,39,42,.5);padding-bottom:env(safe-area-inset-bottom,0px)}
.bottom-nav-inner{max-width:56rem;margin:0 auto;display:flex;align-items:center;justify-content:space-around;padding:6px 0}
.nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;border:none;background:transparent;border-radius:10px;cursor:pointer;transition:all .2s;color:#71717a;-webkit-user-select:none;user-select:none}
.nav-btn.active{color:#f59e0b;background:rgba(245,158,11,.12);font-weight:700}
.nav-btn:hover{color:#d4d4d8}
.nav-btn-label{font-size:9px;font-weight:500}
.nav-btn-add{width:48px;height:48px;margin-top:-20px;background:#f59e0b;border-radius:14px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 8px 12px -2px rgba(245,158,11,.3);transition:all .2s;color:#000}
.nav-btn-add:active{transform:scale(.9)}
.key-selector{display:flex;align-items:center;justify-content:center;gap:4px}
.key-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#3f3f46;border:none;border-radius:8px;cursor:pointer;transition:all .2s;color:#d4d4d8;font-size:1.1rem}
.key-btn:hover{background:#52525b;color:#fff}
.key-btn:active{transform:scale(.9)}
.key-display{min-width:70px;text-align:center}
.key-note{font-size:1.4rem;font-weight:700;color:#fbbf24;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.key-original{font-size:9px;color:#71717a;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;gap:2px;margin:2px auto 0}
.key-original:hover{color:#fbbf24}
.lyrics-container{background:rgba(39,39,42,.3);border:1px solid rgba(63,63,70,.3);border-radius:12px;padding:12px}
.lyrics-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.5;color:#e4e4e7;white-space:pre-wrap}
.chord{color:#fbbf24;font-weight:700;background:rgba(251,191,36,.1);margin:0 1ch;padding:0 2px;border-radius:3px}
.lyrics-section{color:#c084fc;font-weight:700;font-style:italic;font-size:.75rem;display:inline-block;margin-top:4px;padding: 0 1ch}
.list-picker{background:rgba(39,39,42,.5);border:1px solid rgba(63,63,70,.5);border-radius:10px;padding:10px;margin-bottom:12px}
.list-picker-title{font-size:.7rem;color:#71717a;margin-bottom:6px}
.list-chip{padding:5px 10px;border-radius:8px;font-size:.7rem;font-weight:500;border:none;cursor:pointer;transition:all .2s}
.list-chip.in{background:#f59e0b;color:#fff}
.list-chip.out{background:#3f3f46;color:#d4d4d8}.list-chip.out:hover{background:#52525b}
.notification{padding:8px 12px;border-radius:10px;font-size:.8rem;display:flex;align-items:center;gap:6px;margin-bottom:12px}
.notification-success{background:rgba(34,197,94,.2);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.notification-error{background:rgba(248,113,113,.2);color:#f87171;border:1px solid rgba(248,113,113,.3)}
.form-group{margin-bottom:14px}
.key-grid{display:flex;flex-wrap:wrap;gap:6px}
.key-option{padding:5px 10px;border-radius:8px;font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;border:none;cursor:pointer;transition:all .2s}
.key-option.current{background:#f59e0b;color:#fff}
.key-option.other{background:#27272a;color:#a1a1aa}.key-option.other:hover{background:#3f3f46}
.help-box{background:rgba(39,39,42,.5);border:1px solid rgba(63,63,70,.5);border-radius:10px;padding:12px;margin-bottom:10px}
.help-box code{background:#3f3f46;padding:1px 5px;border-radius:3px;font-size:.75rem}
.help-example{background:#18181b;border-radius:8px;padding:10px;font-family:monospace;font-size:.7rem;line-height:1.5}
.help-chord{color:#fbbf24}.help-text{color:#d4d4d8}
.tag-input-wrap{display:flex;gap:6px;margin-bottom:6px}
.tag-list-wrap{display:flex;flex-wrap:wrap;gap:6px}
.tag-item{display:flex;align-items:center;gap:3px;background:#27272a;color:#d4d4d8;padding:3px 10px;border-radius:9999px;font-size:.8rem}
.tag-remove{background:none;border:none;color:#71717a;cursor:pointer;font-size:12px;line-height:1}.tag-remove:hover{color:#f87171}
.song-location{display:flex;align-items:center;gap:4px;font-size:.7rem;color:#71717a;margin-bottom:8px;flex-wrap:wrap}
.nav-arrows{position:sticky;top:64px;z-index:9;background:rgba(9,9,11,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(39,39,42,.3);padding:6px 12px;display:flex;align-items:center;justify-content:space-between}
.nav-arrows-info{font-size:.75rem;color:#a1a1aa;text-align:center;flex:1}
.nav-arrows-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#3f3f46;border:none;border-radius:8px;cursor:pointer;color:#d4d4d8;font-size:.9rem;transition:all .2s}
.nav-arrows-btn:hover{background:#52525b;color:#fff}
.nav-arrows-btn:disabled{opacity:.3;cursor:not-allowed}
.missing-songs{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:10px;margin-bottom:12px}
.missing-songs-title{font-size:.75rem;font-weight:600;color:#fbbf24;margin-bottom:6px}
.missing-song-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(63,63,70,.3);font-size:.75rem;color:#d4d4d8}
.missing-song-item:last-child{border:none}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}
.missing-song-add{padding:2px 8px;border-radius:6px;font-size:.65rem;font-weight:600;border:none;cursor:pointer;background:#f59e0b;color:#000;transition:all .2s}
.missing-song-add:active{transform:scale(.95)}
.install-banner{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,88,12,.15));border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:12px;margin-bottom:12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s}
.install-banner:hover{background:linear-gradient(135deg,rgba(245,158,11,.25),rgba(234,88,12,.25))}
.install-banner-text{flex:1}
.install-banner-title{font-size:.8rem;font-weight:600;color:#fbbf24}
.install-banner-desc{font-size:.65rem;color:#a1a1aa}
.install-banner-btn{padding:5px 10px;border-radius:8px;font-size:.7rem;font-weight:600;border:none;cursor:pointer;background:#f59e0b;color:#000}
.hidden{display:none!important}
.rep-tab{flex:1;padding:8px 16px;border-radius:8px;font-size:.8rem;font-weight:500;border:none;cursor:pointer;transition:all .2s;text-align:center}
.rep-tab.active{background:#f59e0b;color:#000}
.rep-tab:not(.active){background:#27272a;color:#a1a1aa}
.rep-tab:not(.active):hover{background:#3f3f46;color:#fff}
.rep-card{background:rgba(39,39,42,.5);border:1px solid rgba(63,63,70,.5);border-radius:12px;padding:12px;cursor:pointer;transition:all .3s;margin-bottom:10px;position:relative}
.rep-card:hover{background:#27272a;border-color:rgba(245,158,11,.3)}
.rep-card-next{border:1.5px solid #f59e0b}
.rep-card-badge{position:absolute;top:8px;right:10px;font-size:.6rem;font-weight:700;color:#f59e0b;background:rgba(245,158,11,.12);padding:2px 7px;border-radius:5px;letter-spacing:.02em}
.rep-card-title{font-weight:600;color:#fff;display:flex;align-items:center;gap:6px;margin-bottom:2px;font-size:.9rem}
.rep-card-meta{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.rep-meta-item{display:flex;align-items:center;gap:3px;font-size:.7rem;color:#71717a}
.rep-song-card{background:rgba(39,39,42,.5);border:1px solid rgba(63,63,70,.5);border-radius:12px;padding:12px;cursor:pointer;transition:all .3s;margin-bottom:10px;display:flex;gap:10px}
.rep-song-card:hover{background:#27272a;border-color:rgba(245,158,11,.3)}
.rep-song-order{width:32px;height:32px;background:rgba(245,158,11,.2);color:#fbbf24;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.rep-song-info{flex:1;min-width:0}
.rep-song-title{font-weight:600;color:#fff;font-size:.9rem}
.rep-song-artist{font-size:.75rem;color:#a1a1aa}
.rep-song-vocals{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.rep-vocal-main{font-size:.7rem;color:#fbbf24;display:flex;align-items:center;gap:3px}
.rep-vocal-chorus{font-size:.7rem;color:#71717a}
.rep-song-meta{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.toggle-btn{display:flex;gap:8px;margin-top:12px;margin-bottom:12px}
.toggle-btn button{flex:1;padding:10px;border-radius:10px;font-size:.8rem;font-weight:500;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.toggle-btn .active{background:#f59e0b;color:#000}
.toggle-btn .inactive{background:#27272a;color:#a1a1aa}
.toggle-btn .inactive:hover{background:#3f3f46;color:#fff}
/* Reemplaza toda la sección de audio */
.audio-player {
    background: rgba(39,39,42,.5);
    border: 1px solid rgba(63,63,70,.5);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.audio-play-btn {
    width: 44px;
    height: 44px;
    background: #f59e0b;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
}
.audio-play-btn:active {
    transform: scale(.9);
}

.audio-progress {
    flex: 1;
    min-width: 0;
}

.audio-bar {
    height: 8px;
    background: #3f3f46;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    padding: 6px 0;
    touch-action: none;
}

.audio-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 4px;
    transition: width 0.1s ease;
    position: relative;
    width: 0%;
    min-width: 0;
}

.audio-bar-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
    border: 2px solid #09090b;
    opacity: 1;
}

.audio-time {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: .65rem;
    color: #71717a;
    font-family: monospace;
}
.rep-day-badge{display:inline-block;font-size:.65rem;padding:2px 8px;border-radius:4px;margin-top:4px}
.rep-day-badge.dom{background:rgba(59,130,246,.2);color:#60a5fa}
.rep-day-badge.lun{background:rgba(168,85,247,.2);color:#c084fc}
.login-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.login-box{background:#27272a;border:1px solid #3f3f46;border-radius:16px;padding:24px;width:300px;margin:0 16px}
.login-box h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:4px}
.login-box p{font-size:.75rem;color:#a1a1aa;margin-bottom:16px}
.login-error{font-size:.75rem;color:#f87171;margin-bottom:8px}
.upload-zone{border:2px dashed rgba(63,63,70,.8);border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:12px}
.upload-zone:hover{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.05)}
.upload-zone.dragover{border-color:#f59e0b;background:rgba(245,158,11,.1)}
.upload-progress{margin-top:8px}
.upload-progress-bar{height:4px;background:#3f3f46;border-radius:2px;overflow:hidden}
.upload-progress-fill{height:100%;background:#f59e0b;transition:width .3s;width:0%}

.install-float{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom,0px));right:12px;z-index:55;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ea580c);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(245,158,11,.4);transition:all .3s;color:#000}
.install-float:active{transform:scale(.9)}
.install-float:hover{box-shadow:0 6px 20px rgba(245,158,11,.5)}
.install-float.hidden-inst{display:none}

/* ============= MOBILE RESPONSIVE ============= */
@media(max-width:640px){
  .hide-mobile{display:none!important}
  .header-inner{gap:4px}
  .header-inner>div:last-child{gap:4px}
  .btn{padding:5px 8px;font-size:.75rem}
  .btn svg{flex-shrink:0}
  .user-btn{padding:4px 8px;font-size:.7rem}
  .user-btn span{display:none}
  .user-avatar{width:28px;height:28px;font-size:.75rem}
  .header-title{font-size:1rem}
}

/* ============= VOCAL NOTES INLINE STYLES ============= */
.section-note-wrap{display:inline;position:relative}
.section-note-input{display:inline-block;min-width:120px;max-width:280px;padding:1px 6px;margin-left:4px;border:none;border-bottom:1px dashed rgba(245,158,11,.4);background:rgba(245,158,11,.05);color:#fbbf24;font-size:.7rem;font-family:inherit;font-style:italic;outline:none;transition:all .2s;border-radius:3px 3px 0 0;vertical-align:baseline;line-height:1.4}
.section-note-input:focus{border-bottom-color:#f59e0b;background:rgba(245,158,11,.1);box-shadow:0 1px 4px rgba(245,158,11,.15)}
.section-note-input::placeholder{color:rgba(245,158,11,.35);font-style:italic}
.section-note-display{display:inline-block;margin-left:4px;font-size:.7rem;color:#fbbf24;font-style:italic;opacity:.8}
.section-note-status{font-size:.55rem;color:#71717a;position:absolute;right:0;top:-10px;white-space:nowrap;pointer-events:none}
.lib-notes-row{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex:1}
.lib-notes-btn{padding:4px 10px;border-radius:8px;font-size:.7rem;font-weight:500;border:1px solid rgba(63,63,70,.5);background:rgba(39,39,46,.8);color:#a1a1aa;cursor:pointer;transition:all .2s;white-space:nowrap}
.lib-notes-btn:hover{border-color:rgba(245,158,11,.3);color:#fbbf24}
.lib-notes-btn.active{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:#fbbf24}
.lib-notes-panel{margin-top:8px;padding:10px;background:rgba(39,39,42,.3);border:1px solid rgba(63,63,70,.3);border-radius:10px}
.lib-notes-section{margin-bottom:6px}.lib-notes-section:last-child{margin-bottom:0}
.lib-notes-section-label{font-size:.7rem;font-weight:600;margin-bottom:3px}
.lib-notes-section-text{font-size:.75rem;color:#d4d4d8;line-height:1.5;padding:4px 8px;background:rgba(39,39,42,.4);border-radius:6px}
.ios-install-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.install-ios-box{background:#27272a;border:1px solid #3f3f46;border-radius:16px;padding:24px;width:320px;margin:0 16px}
.install-ios-box h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:8px}
.install-ios-box p{font-size:.8rem;color:#a1a1aa;margin-bottom:12px;line-height:1.5}
.install-ios-box .step{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.8rem;color:#d4d4d8}
.install-ios-box .step-num{width:24px;height:24px;background:#f59e0b;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}

/* ============= AUTH STYLES ============= */
.auth-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);z-index:1000;align-items:center;justify-content:center;padding:20px}
.auth-modal.active{display:flex}
.auth-card{background:#18181b;border:1px solid rgba(63,63,70,.5);border-radius:16px;padding:24px;width:100%;max-width:360px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.auth-title{font-size:1.25rem;font-weight:700;color:#fff;text-align:center;margin-bottom:6px}
.auth-subtitle{font-size:.8rem;color:#71717a;text-align:center;margin-bottom:20px}
.auth-tabs{display:flex;gap:4px;background:#27272a;border-radius:10px;padding:4px;margin-bottom:20px}
.auth-tab{flex:1;padding:8px;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;background:transparent;color:#71717a}
.auth-tab.active{background:#f59e0b;color:#000}
.auth-tab:hover:not(.active){color:#a1a1aa}
.auth-error{background:rgba(248,113,113,.2);color:#f87171;padding:8px 12px;border-radius:8px;font-size:.75rem;margin-bottom:12px;display:none}
.auth-error.show{display:block}
.auth-success{background:rgba(34,197,94,.2);color:#4ade80;padding:8px 12px;border-radius:8px;font-size:.75rem;margin-bottom:12px;display:none}
.auth-success.show{display:block}
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;border:1px solid rgba(63,63,70,.5);background:#27272a;color:#d4d4d8;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}
.user-btn:hover{border-color:rgba(245,158,11,.3);background:#3f3f46}
.user-avatar{width:24px;height:24px;background:#f59e0b;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}
.user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:#27272a;border:1px solid rgba(63,63,70,.5);border-radius:12px;padding:8px;min-width:180px;box-shadow:0 10px 25px rgba(0,0,0,.3);display:none;z-index:100}
.user-dropdown.active{display:block}
.user-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:.8rem;color:#d4d4d8;cursor:pointer;transition:all .2s;border:none;background:transparent;width:100%;text-align:left}
.user-dropdown-item:hover{background:#3f3f46;color:#fff}
.user-dropdown-divider{height:1px;background:rgba(63,63,70,.5);margin:4px 0}

/* ============= IMPORT CONFIRM MODAL STYLES ============= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

#notification-styles {
    display: none;
}

/* Overlay del modal de importación */
#import-confirm-modal {
    animation: fadeIn .25s ease;
}

/* Scrollbar personalizada dentro del modal de importación */
#import-confirm-modal::-webkit-scrollbar {
    width: 4px;
}

#import-confirm-modal::-webkit-scrollbar-track {
    background: rgba(63,63,70,.2);
    border-radius: 2px;
}

#import-confirm-modal::-webkit-scrollbar-thumb {
    background: rgba(245,158,11,.4);
    border-radius: 2px;
}

/* Mejora para los botones del modal de importación */
#import-confirm-modal .btn {
    transition: all .2s ease;
}

#import-confirm-modal .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

#import-confirm-modal .btn:active {
    transform: scale(.98);
}

/* Estilo para el banner de "pendiente" en listas */
#pending-import-banner {
    animation: fadeIn .3s ease;
}

/* Floating notification */
.floating-notification {
    animation: slideDown .3s ease;
}

/* ============= VOCAL TAB STYLES ============= */
.vocal-tab{background:transparent;color:#71717a;border:none;cursor:pointer;transition:all .2s}
.vocal-tab.active{background:rgba(245,158,11,.15);color:#fbbf24}
.vocal-tab:hover:not(.active){background:rgba(63,63,70,.3);color:#a1a1aa}