/* Peças comuns dos visualizadores (Fotos, Vídeo, Música). Requer barra.css. */
.md-wrap{display:flex;height:100%;min-height:0}
.md-stage{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.md-side{width:300px;flex:0 0 auto;border-left:1px solid var(--border);background:var(--card);display:flex;flex-direction:column;min-height:0}
.md-side h2{margin:0;padding:10px 12px;font-size:13px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.md-side h2 span{flex:1}
.md-list{flex:1;overflow:auto;margin:0;padding:0;list-style:none;-webkit-overflow-scrolling:touch}
.md-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:14px;-webkit-tap-highlight-color:transparent}
.md-list li:active{background:var(--btn)}
.md-list li.atual{background:var(--btn-active);font-weight:650}
.md-list .n{color:var(--muted);font-size:12px;min-width:20px;text-align:right;font-variant-numeric:tabular-nums}
.md-list .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-list .d{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.md-list .x{border:0;background:none;color:var(--muted);font-size:18px;line-height:1;padding:2px 4px;cursor:pointer}
.md-empty{margin:auto;max-width:420px;padding:24px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.md-empty b{color:var(--text)}
.md-panel{border-top:1px solid var(--border);background:var(--card);padding:12px 14px;overflow:auto}
.md-panel h3{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:700}
.md-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0;font-size:14px}
.md-row label{min-width:92px;color:var(--muted)}
.md-row input[type=range]{flex:1;min-width:120px;accent-color:var(--accent)}
.md-row output{min-width:52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.md-note{color:var(--muted);font-size:12px;line-height:1.45;margin:8px 0 0}
.md-hide{display:none!important}
@media (max-width:760px){.md-wrap{flex-direction:column}.md-side{width:auto;border-left:0;border-top:1px solid var(--border);max-height:40%}}