/* Songmorro: estilos propios (la identidad común está en /comun/css/base.css) */
.espacio-barra { flex: 1; }
/* ------------------------------------------------------------- Songmorro */
.sm-nivel { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.sm-nivel p { margin-bottom: 4px; }
.sm-nivel .btn { margin-top: auto; }
.sm-detalles { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 2px; color: var(--texto-suave); }
.sm-cabecera { margin-bottom: 12px; }
.sm-datos { margin-bottom: 16px; }

.sm-barra {
    position: relative; display: flex; gap: 4px; height: 22px; margin: 6px 0 18px;
    padding: 3px; border-radius: 999px; background: #1f1440; border: 2px solid var(--borde); overflow: hidden;
}
.sm-seg { flex-basis: 0; min-width: 12px; border-radius: 999px; background: var(--superficie-2); }
.sm-seg.abierto { background: var(--chapa-2); }
.sm-seg.gastado { background: var(--acento); }
.sm-relleno {
    position: absolute; left: 3px; top: 3px; bottom: 3px; width: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .45); pointer-events: none;
}
.sm-play { margin-bottom: 18px; }

.sm-campo { position: relative; margin-bottom: 12px; }
.sm-sugerencias {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; margin: 0; padding: 6px; list-style: none;
    max-height: 280px; overflow-y: auto; border-radius: 14px; border: 2px solid var(--borde);
    background: var(--superficie); box-shadow: var(--sombra);
}
.sm-sugerencias[hidden] { display: none; }
.sm-sugerencias li { padding: .65rem .8rem; min-height: 44px; border-radius: 10px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.sm-sugerencias li.activa, .sm-sugerencias li:hover { background: var(--superficie-2); outline: 2px solid var(--acento-2); outline-offset: -2px; }
.sm-sugerencias li.vacia { cursor: default; color: var(--texto-suave); }

.sm-fallos { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.sm-fallos li {
    padding: .5rem .8rem; border-radius: 12px; background: #1f1440; border: 2px solid var(--borde);
    color: var(--texto-suave); text-decoration: line-through; text-decoration-color: var(--mal);
}
.sm-fallos li.salto { text-decoration: none; font-style: italic; }

.sm-resultado { border-radius: 16px; padding: 16px; margin-top: 4px; text-align: center; border: 3px solid var(--borde); }
.sm-resultado.acierto { border-color: var(--ok); background: rgba(61, 220, 151, .08); }
.sm-resultado.fallo { border-color: var(--mal); background: rgba(255, 107, 107, .08); }
.sm-resultado .fila { justify-content: center; }
.sm-cancion { font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
    .sm-relleno { transition: none; }
}