.scm-visor-layout { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #e1e8ed; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.scm-visor-main { flex: 1 1 65%; min-width: 300px; background: #fdfdfd; }
.scm-visor-sidebar { flex: 1 1 35%; min-width: 250px; background: #f4f6f7; border-left: 1px solid #e1e8ed; display: flex; flex-direction: column; max-height: 70vh; }
.scm-sidebar-header { padding: 20px; background: #2c3e50; color: white; }
.scm-sidebar-header h3 { margin: 0 0 10px 0; font-size: 1.2rem; color:#fff; }
.scm-progress-bar-bg { background: rgba(255,255,255,0.2); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.scm-progress-bar-fill { background: #27ae60; height: 100%; transition: width 0.3s; }
.scm-temario-lista { list-style: none; padding: 0; margin: 0; overflow-y: auto; }
.scm-temario-item { display: flex; padding: 15px 20px; border-bottom: 1px solid #e1e8ed; cursor: pointer; align-items: center; transition: background 0.2s; }
.scm-temario-item:hover:not(.locked) { background: #e8ecef; }
.scm-temario-item.playing { background: #dce4e8; border-left: 4px solid #3498db; }
.scm-temario-item.locked { opacity: 0.6; cursor: not-allowed; }
.scm-item-icon { font-size: 1.2rem; margin-right: 15px; width: 25px; text-align: center; }
.scm-item-info { display: flex; flex-direction: column; }
.scm-item-title { font-weight: bold; color: #333; font-size: 0.95rem; }
.scm-item-type { font-size: 0.8rem; color: #7f8c8d; }