/* ============================================================
   MusicReader · app.css
   Estilos generales (sidebar, toolbar, layout, progreso)
   ============================================================ */

:root{
  --sidebar-width: 320px;
}

body{
  background:#f0f2f5;
  font-family:'Segoe UI',Tahoma,sans-serif;
  overflow-x:hidden;
}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;top:0;left:0;
  width:var(--sidebar-width);height:100vh;
  background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);
  color:#ecf0f1;padding:20px;overflow-y:auto;z-index:1000;
  transition:transform .3s ease;
  box-shadow:2px 0 10px rgba(0,0,0,.3);
}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:#3498db;border-radius:3px;}

.sidebar-header{
  text-align:center;padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px;
}
.sidebar-header h4{font-weight:700;letter-spacing:1px;color:#3498db;}
.sidebar-header small{color:#95a5a6;font-size:.72rem;}

.control-group{margin-bottom:16px;}
.control-group>label{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:#bdc3c7;margin-bottom:6px;display:block;
}

.form-select,.form-control{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#ecf0f1;font-size:.85rem;border-radius:6px;
}
.form-select:focus,.form-control:focus{
  background:rgba(255,255,255,.12);border-color:#3498db;
  color:#fff;box-shadow:0 0 0 .2rem rgba(52,152,219,.25);
}
.form-select option{background:#1a1a2e;color:#ecf0f1;}

/* Botones tipo radio/check custom */
.btn-check+.btn-outline-custom{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  color:#bdc3c7;font-size:.78rem;padding:4px 9px;
  border-radius:5px;transition:all .2s;
}
.btn-check:checked+.btn-outline-custom{
  background:#3498db;border-color:#3498db;color:#fff;
  box-shadow:0 0 8px rgba(52,152,219,.5);
}
.btn-check+.btn-outline-custom:hover{
  background:rgba(52,152,219,.2);border-color:#3498db;color:#fff;
}

/* ---------- Layout principal ---------- */
.main-content{
  margin-left:var(--sidebar-width);
  padding:20px;min-height:100vh;
}

/* ---------- Toolbar ---------- */
.toolbar{
  background:#fff;border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:12px 20px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
.toolbar .btn{
  border-radius:8px;font-size:.85rem;
  padding:8px 16px;font-weight:600;
}

.btn-play{
  background:linear-gradient(135deg,#27ae60,#2ecc71);
  border:none;color:#fff;
}
.btn-play:hover{
  background:linear-gradient(135deg,#229954,#27ae60);color:#fff;
}

.btn-generate{
  background:linear-gradient(135deg,#2980b9,#3498db);
  border:none;color:#fff;font-weight:600;
}
.btn-generate:hover{
  background:linear-gradient(135deg,#2471a3,#2980b9);color:#fff;
}

.metronome-indicator{
  width:14px;height:14px;border-radius:50%;
  background:#bdc3c7;display:inline-block;
  transition:background .1s;
}
.metronome-indicator.active{
  background:#e74c3c;
  box-shadow:0 0 10px rgba(231,76,60,.6);
}

.score-info{
  display:flex;gap:8px;flex-wrap:wrap;
  font-size:.78rem;color:#7f8c8d;
}
.score-info span{
  background:#f8f9fa;padding:4px 10px;border-radius:6px;
  border:1px solid #e9ecef;
}

/* ---------- Contenedor de partitura ---------- */
.score-container{
  background:#fff;border-radius:12px;padding:25px;
  min-height:380px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  overflow-x:auto;
}
.score-container svg{display:block;margin:0 auto;}

/* ---------- Barra de progreso ---------- */
.progress-box{
  background:#fff;border-radius:10px;
  padding:10px 16px;margin-bottom:15px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  display:flex;align-items:center;gap:15px;
}
.progress-box .bar{
  flex:1;height:10px;background:#e9ecef;
  border-radius:5px;overflow:hidden;
}
.progress-box .bar-fill{
  height:100%;
  background:linear-gradient(90deg,#27ae60,#2ecc71);
  width:0%;transition:width .3s;
}
.progress-box .label{
  font-weight:600;color:#2c3e50;
  font-size:.85rem;white-space:nowrap;
}
.progress-box .msg{
  font-weight:700;color:#27ae60;font-size:.9rem;
}

/* ---------- Footer ---------- */
.app-footer{
  text-align:center;padding:15px;
  color:#95a5a6;font-size:.75rem;
}

/* ---------- Toggle mobile ---------- */
.sidebar-toggle{
  display:none;position:fixed;
  top:15px;left:15px;z-index:1100;
  background:#1a1a2e;color:#fff;border:none;
  border-radius:8px;padding:10px 14px;font-size:1.2rem;
}

/* ---------- Responsive ---------- */
@media (max-width:992px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.show{transform:translateX(0);}
  .main-content{margin-left:0;}
  .sidebar-toggle{display:block;}
}