/* DomoCamper · Estilos del módulo multimedia (multimedia.php) */

/* Modo día (por defecto), mismos colores que el panel domótico */
:root{
 --azul:#0284a8;--azul-claro:#e3f3f8;--texto:#16213a;--gris:#7a8494;--borde:#e2e6ec;--fondo:#f3f5f8;
 --tarjeta:#fff;--boton:#fff;--pista:#dfe4ea
}
/* Modo noche */
:root[data-tema="noche"]{
 --azul:#22a6cc;--azul-claro:#123544;--texto:#e6ebf2;--gris:#8d97a8;--borde:#283243;--fondo:#0f141c;
 --tarjeta:#171e29;--boton:#1e2734;--pista:#283243;
 color-scheme:dark
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:var(--fondo);-webkit-tap-highlight-color:transparent}
main{max-width:900px;margin:0 auto;padding:20px 16px 150px}

/* Cabecera y buscador */
header h1{margin:0 0 14px;font-size:24px;font-weight:800}
#buscador{display:flex;gap:8px;margin-bottom:16px}
#buscador input{flex:1;min-width:0;padding:14px 16px;border:1px solid var(--borde);border-radius:14px;background:var(--tarjeta);color:var(--texto);font:16px system-ui,sans-serif;outline:none}
#buscador input:focus{border-color:var(--azul)}
#buscador button,#mas{padding:0 20px;border:0;border-radius:14px;background:var(--azul);color:#fff;font:600 15px system-ui,sans-serif;cursor:pointer}
#mas{display:block;margin:14px auto 0;height:44px}
#mas[hidden]{display:none}

/* Lista de resultados */
#lista{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;overflow:hidden}
.vacio{margin:0;padding:40px 16px;text-align:center;color:var(--gris)}
.pista{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--borde);cursor:pointer}
.pista:first-child{border-top:0}
.pista:hover{background:var(--fondo)}
.pista.sonando{background:var(--azul-claro)}
.pista.sonando b{color:var(--azul)}
.pista img{width:80px;height:45px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--pista)}
.pista div{flex:1;min-width:0}
.pista b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pista small{display:block;font-size:12.5px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pista span{font-size:13px;color:var(--gris);flex-shrink:0}

/* Reproductor fijo abajo */
#reproductor{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:16px;padding:12px 18px;background:var(--tarjeta);border-top:1px solid var(--borde);box-shadow:0 -4px 16px #0000000f}
.pantalla{width:112px;height:63px;border-radius:10px;overflow:hidden;background:#000;flex-shrink:0}
.pantalla iframe{display:block;width:100%;height:100%;pointer-events:none}
.info{flex:1;min-width:0}
.info b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info small{display:block;font-size:12.5px;color:var(--gris);min-height:16px}
.tiempo{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var(--gris)}
.tiempo input{flex:1}
input[type=range]{accent-color:var(--azul)}

.mandos{display:flex;align-items:center;gap:8px}
.mandos button{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:var(--boton);color:var(--texto);font-size:17px;cursor:pointer}
.mandos button.grande{width:56px;height:56px;border:0;background:var(--azul);color:#fff;font-size:22px}
.volumen{display:flex;align-items:center;gap:6px}
.volumen input{width:100px}

/* Móvil: el reproductor se reparte en dos líneas */
@media (max-width:640px){
 main{padding-bottom:200px}
 #reproductor{flex-wrap:wrap;gap:10px;padding:10px 14px}
 .pantalla{width:80px;height:45px}
 .info{flex-basis:calc(100% - 92px)}
 .mandos{flex:1;justify-content:center}
 .volumen{display:none}
}