/* EdutManagerStudio - Reproductor web (mismos colores que los programas de VFP) */
:root{
  --fondo:#0f1626; --fondo2:#0b111d; --panel:#172237; --borde:#2a3852; --borde2:#2f3d5a;
  --texto:#e6ecf5; --tenue:#8fa0bd; --tenue2:#7f93b8; --azul:#4f7cf0; --sel:#2b3f66;
  --ok:#6ed7a0; --aviso:#ffc85a; --mal:#ff8a8a; --rosa:#ff6b8a;
  --lado:232px; --der:420px; --nav:58px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
button,a,input{touch-action:manipulation}
html,body{margin:0;height:100%;max-width:100%;overflow-x:hidden}
img,iframe,video{max-width:100%}
body{background:var(--fondo);color:var(--texto);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:14px;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input{font:inherit;color:var(--texto)}
a{color:var(--azul);text-decoration:none}
svg{width:1em;height:1em;fill:currentColor;vertical-align:-.15em}
.ico{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:#cdd8ea;border-radius:20px}
.ico:active{background:#ffffff14}

/* --- Vista principal --- */
#vista{min-height:100vh;padding-bottom:calc(var(--nav) + 16px)}
body.sonando:not(.ancho) #vista{padding-bottom:calc(var(--nav) + 230px)}
body.sonando.compacto:not(.ancho) #vista{padding-bottom:calc(var(--nav) + 86px)}
.cab{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.cab h1{font-size:20px;margin:0}
.cab .der{margin-left:auto}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#4f7cf0,#8a5cf0);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex:none}
.sec{font-size:11px;letter-spacing:1px;color:var(--tenue2);font-weight:600;margin:18px 16px 8px;text-transform:uppercase}
.vacio{color:var(--tenue);padding:24px 16px;text-align:center;line-height:20px}

/* filas de canciones */
.fila{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer}
.fila:active,.fila:hover{background:#ffffff08}
.fila.on{background:var(--panel)}
.fila .n{width:20px;font-size:12px;color:var(--tenue);text-align:center;flex:none}
.fila.on .n{color:var(--azul)}
.cv{width:46px;height:46px;border-radius:8px;object-fit:cover;background:var(--panel);flex:none}
.fila .tx{min-width:0;flex:1}
.fila .t{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .d{font-size:12px;color:var(--tenue);margin-top:2px}
.fila .mas{font-size:18px;color:var(--tenue);width:34px;height:34px;flex:none}

/* tarjetas de listas */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:0 16px}
.tlista{border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--borde);cursor:pointer}
.tlista img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#0b111d}
.tlista .n{font-size:13px;font-weight:600;color:#fff;padding:8px 10px 0;line-height:17px}
.tlista .c{font-size:11px;color:var(--tenue);padding:2px 10px 9px}
.horiz{display:flex;gap:12px;overflow-x:auto;padding:0 16px 6px;scrollbar-width:none}
.horiz::-webkit-scrollbar{display:none}
.tcan{width:112px;flex:none;cursor:pointer}
.tcan img{width:112px;height:112px;border-radius:12px;object-fit:cover;display:block;background:var(--panel)}
.tcan div{font-size:12px;color:#cdd8ea;margin-top:6px;line-height:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seguir{display:flex;align-items:center;gap:12px;margin:0 16px;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--borde);cursor:pointer}
.seguir .tx{flex:1;min-width:0}.seguir .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seguir .d{font-size:12px;color:var(--tenue)}
.seguir .p{color:var(--azul);font-size:24px}
.vermas{display:block;text-align:right;font-size:12px;margin:8px 16px 0}

/* cabecera de una lista */
.heroe{position:relative;height:230px;background:#0b111d}
.heroe img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.heroe:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,38,.1),rgba(15,22,38,.25) 40%,var(--fondo))}
.heroe .volver{position:absolute;top:10px;left:8px;z-index:2;color:#fff}
.heroe .tx{position:absolute;left:16px;right:16px;bottom:12px;z-index:2}
.heroe h1{margin:0;font-size:24px;line-height:28px}
.heroe .d{font-size:12.5px;color:#cdd8ea;margin-top:4px}
.botones{display:flex;gap:10px;padding:12px 16px}
.btn{height:42px;border-radius:21px;background:var(--azul);color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:0 16px}
.btn2{height:42px;border-radius:21px;border:1px solid #3a4a6a;color:#cdd8ea;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:0 16px}
.btn:disabled{opacity:.6}

/* buscador y chips */
.buscar{margin:4px 16px 8px;position:relative}
.buscar input{width:100%;height:40px;border-radius:20px;background:var(--panel);border:1px solid var(--borde);padding:0 14px 0 38px;outline:none;font-size:16px}
.buscar input:focus{border-color:var(--azul)}
.buscar svg{position:absolute;left:13px;top:12px;color:var(--tenue2)}
.chips{display:flex;gap:6px;padding:4px 16px 8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{font-size:12px;padding:5px 12px;border-radius:14px;border:1px solid var(--borde);color:#cdd8ea;white-space:nowrap}
.chip.on{background:var(--sel);border-color:var(--azul);color:#fff}

/* formularios (entrar, registro, código, cuenta) */
.caja{max-width:400px;margin:0 auto;padding:34px 24px 40px}
.caja .logo{width:60px;height:60px;border-radius:18px;font-size:30px;margin:0 auto;display:flex}
.caja h1{font-size:22px;text-align:center;margin:12px 0 4px}
.caja .sub{font-size:13px;color:var(--tenue);text-align:center;line-height:18px}
.lb{font-size:12px;color:var(--tenue);margin:14px 4px 5px;display:block}
.campo{position:relative}
.campo input{width:100%;height:44px;border-radius:22px;background:var(--fondo2);border:1px solid var(--borde2);padding:0 16px;outline:none;font-size:16px}
.campo input:focus{border-color:var(--azul)}
.campo .ver{position:absolute;right:6px;top:2px}
.caja .btn{width:100%;margin-top:20px;flex:none}
.caja .btn2{width:100%;margin-top:12px;flex:none}
.error{color:var(--mal);font-size:13px;text-align:center;min-height:18px;margin-top:12px}
.nota{font-size:12px;color:var(--tenue2);text-align:center;margin-top:12px;line-height:17px}
.pruebas{margin-top:16px;padding:10px 12px;border-radius:12px;background:#3a2f12;border:1px solid #6b5520;color:var(--aviso);font-size:13px;text-align:center}
.codigo{display:flex;gap:8px;justify-content:center;margin-top:22px}
.codigo input{width:44px;height:54px;border-radius:12px;background:var(--fondo2);border:1px solid var(--borde2);text-align:center;font-size:22px;font-weight:700;outline:none}
.codigo input:focus{border-color:var(--azul);box-shadow:0 0 0 2px rgba(79,124,240,.3)}
.tarjeta{margin:12px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--borde);padding:14px;line-height:20px;color:#cdd8ea}
.tarjeta b{color:#fff}
.etq{display:inline-block;font-size:11px;padding:2px 9px;border-radius:10px}
.etq.av{background:#3a2f12;color:var(--aviso);border:1px solid #6b5520}
.etq.ok{background:#12352a;color:var(--ok);border:1px solid #215c47}
.etq.mal{background:#3a1717;color:var(--mal);border:1px solid #6b2a2a}

/* barra de abajo (celular) */
#nav{position:fixed;left:0;right:0;bottom:0;height:var(--nav);background:var(--fondo2);border-top:1px solid #1f2b42;display:flex;justify-content:space-around;align-items:center;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
#nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--tenue2);min-width:70px}
#nav a svg{font-size:20px}
#nav a.on{color:var(--azul)}
body.auth #nav,body.auth #lado,body.auth #mini,body.auth #dock{display:none!important}

/* --- Reproductor --- */
#rp{display:none;flex-direction:column;background:var(--fondo)}
#rpHueco{flex:none}
#rpCuerpo{display:flex;flex-direction:column;flex:1;min-height:0}
#rpVacio{display:none;color:var(--tenue);text-align:center;padding:30px}
body:not(.sonando) #rpCuerpo{display:none}
body:not(.sonando) #rpVacio{display:block}
.rp-top{display:flex;align-items:center;padding:4px 8px;height:48px;flex:none}
.rp-top #rpLista{flex:1;text-align:center;font-size:11px;letter-spacing:1px;color:var(--tenue);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-info{display:flex;gap:14px;align-items:center;padding:14px 18px 6px}
#rpCar{width:58px;height:58px;border-radius:10px;object-fit:cover;background:var(--panel);flex:none}
.rp-tit{flex:1;min-width:0;display:flex;flex-direction:column}
.rp-tit b{font-size:17px;line-height:21px;overflow-wrap:anywhere}
.rp-tit span{font-size:12.5px;color:var(--tenue);margin-top:3px}
.corazon{color:var(--tenue)}.corazon.on{color:var(--rosa)}
#rpBarra{display:block;width:calc(100% - 36px);max-width:calc(100% - 36px);padding:0;margin:8px 18px 0;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#2a3852;outline:none}
#rpBarra::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:7px;background:#fff}
#rpBarra::-moz-range-thumb{width:14px;height:14px;border-radius:7px;background:#fff;border:0}
.rp-tiempos{display:flex;justify-content:space-between;margin:6px 18px 0;font-size:11px;color:var(--tenue)}
#rpLetra{flex:1;min-height:90px;overflow-y:auto;padding:8px 20px;scroll-behavior:smooth;scrollbar-width:none;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
#rpLetra::-webkit-scrollbar{display:none}
#rpLetra p{overflow-wrap:anywhere;margin:0;padding:5px 0;font-size:16px;line-height:23px;color:#6f7f9c;cursor:pointer;transition:color .2s,font-size .2s}
#rpLetra p.ya{color:#56658a}
#rpLetra p.on{color:#fff;font-weight:700;font-size:19px}
#rpLetra .sinsrt{white-space:pre-line;color:#9fb0cc;font-size:14px;line-height:22px;cursor:default}
.rp-ctl{display:flex;justify-content:space-between;align-items:center;padding:6px 22px 0;gap:4px}
.rp-ctl .on{color:var(--azul)}
.play{width:66px;height:66px;border-radius:33px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 6px 24px rgba(79,124,240,.4)}
.play.chico{width:46px;height:46px;font-size:18px;box-shadow:none}
.rp-acc{display:flex;justify-content:space-around;padding:14px 10px 0}
.rp-acc button{min-width:0;flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--tenue)}
.rp-acc button span{font-size:18px;color:#cdd8ea}
.rp-mp3{text-align:center;padding:14px 0 18px}
.candado{display:inline-block;font-size:12px;padding:5px 14px;border-radius:14px;background:#3a2f12;color:var(--aviso);border:1px solid #6b5520}
.candado.ok{background:#12352a;color:var(--ok);border-color:#215c47}
.candado.ok.on{background:#1b4a39}
/* Modo MP3: la imagen ocupa el lugar del video; el video de YouTube no se usa */
#rpArte{display:none;width:100%;height:100%;object-fit:cover;background:#0b111d}
body.motor-mp3 #rpArte{display:block}
body.motor-mp3 #dock{left:-9999px!important;right:auto!important;top:0!important}
body.ancho #rpHueco{padding:16px 16px 0}
body.ancho #rpArte{border-radius:10px}

/* el video (dock) y el mini reproductor */
#dock{position:fixed;display:none;background:#000;z-index:40;overflow:hidden}
#dock iframe,#yt{width:100%;height:100%;display:block;border:0}
body.sonando #dock{display:block}
#mini{display:none}

/* Celular: reproductor en pantalla completa */
body:not(.ancho).en-rp #rp{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-width:100%;z-index:35;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}
body:not(.ancho).en-rp #rpHueco{width:100%;height:auto;aspect-ratio:16/9}
body:not(.ancho).en-rp #dock{top:48px;left:0;right:0;width:auto;height:auto;aspect-ratio:16/9}
body:not(.ancho).en-rp #nav,body:not(.ancho).en-rp #mini{display:none}
/* Celular, en otra pantalla: el video queda pequeño (200x200, el mínimo de YouTube) abajo a la derecha */
body:not(.ancho):not(.en-rp).sonando #dock{right:8px;bottom:calc(var(--nav) + 8px);width:200px;height:200px;border-radius:12px}
/* Con el video sonando: tarjeta al lado del video de 200x200 */
body:not(.ancho):not(.en-rp).sonando #mini{display:flex;flex-direction:column;position:fixed;left:8px;right:216px;bottom:calc(var(--nav) + 8px);height:200px;border-radius:12px;background:#1d2a42;border:1px solid var(--borde);padding:10px;z-index:31}
#miniCar{display:none}
.mini-tx{flex:1;min-width:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.mini-t{font-size:13px;font-weight:700;line-height:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:24px}
.mini-l{font-size:12px;color:var(--tenue);margin-top:6px;line-height:16px;flex:1;overflow:hidden}
.mini-c{display:flex;align-items:center;justify-content:space-between}
.mini-c .ico{width:34px;height:34px;font-size:18px}
.mini-x{position:absolute;top:4px;right:4px;width:32px;height:32px;font-size:16px;color:var(--tenue)}
.mini-abrir{margin-top:8px;font-size:12px;color:var(--azul);text-align:center}
/* En pausa o en MP3: barra delgada (sin video) */
body:not(.ancho):not(.en-rp).sonando.compacto #mini{flex-direction:row;align-items:center;gap:6px;right:8px;height:64px;padding:8px 4px 8px 8px}
body.compacto #miniCar{display:block;width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:var(--panel);cursor:pointer}
body.compacto .mini-t{-webkit-line-clamp:1;padding-right:0}
body.compacto .mini-l{flex:none;margin-top:2px;white-space:nowrap;text-overflow:ellipsis}
body.compacto .mini-c{flex:none}
body.compacto .mini-c .play.chico{width:40px;height:40px;font-size:16px}
body.compacto .mini-x{position:static;flex:none}
body.compacto .mini-abrir{display:none}
body.compacto:not(.ancho):not(.en-rp) #dock{left:-9999px!important;right:auto!important}

/* Computador: menú a la izquierda, reproductor a la derecha */
body.ancho #nav{display:none}
body.ancho #lado{display:flex}
body.ancho #vista{margin-left:var(--lado);margin-right:var(--der);padding-bottom:30px}
body.ancho #rp{display:flex;position:fixed;top:0;right:0;bottom:0;width:var(--der);border-left:1px solid #1f2b42;background:var(--fondo2);overflow:hidden;z-index:20}
body.ancho .rp-top{display:none}
body.ancho #rpHueco{height:calc((var(--der) - 32px) * .5625 + 16px)}
body.ancho #dock{top:16px;right:16px;width:calc(var(--der) - 32px);height:calc((var(--der) - 32px) * .5625);border-radius:10px}
#lado{display:none;position:fixed;left:0;top:0;bottom:0;width:var(--lado);background:var(--fondo2);border-right:1px solid #1f2b42;flex-direction:column;padding:16px 12px;z-index:20;overflow-y:auto}
#lado .marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;margin:0 4px 16px}
#lado a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#cdd8ea;font-size:13.5px}
#lado a.on{background:var(--sel);color:#fff;font-weight:600}
#lado .sec{margin:16px 10px 6px}
#lado .yo{margin-top:auto;padding:12px 6px 0;border-top:1px solid #1f2b42;font-size:12px;color:var(--tenue)}
body.ancho .heroe{height:260px}

/* ventana encima (letra completa, agregar a lista, menú) */
#modal{display:none;position:fixed;inset:0;background:rgba(3,6,12,.7);z-index:60;align-items:flex-end;justify-content:center}
#modal.on{display:flex}
#modal .hoja{width:100%;max-width:520px;max-height:80vh;overflow-y:auto;background:var(--panel);border-radius:18px 18px 0 0;padding:16px 18px 26px}
body.ancho #modal{align-items:center}
body.ancho #modal .hoja{border-radius:18px}
#modal h2{font-size:17px;margin:4px 0 12px}
#modal .op{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border-bottom:1px solid #22304a;font-size:14px;text-align:left}
#modal .letra{white-space:pre-line;line-height:24px;color:#cdd8ea}
#aviso{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1d2a42;border:1px solid var(--borde);padding:10px 16px;border-radius:12px;font-size:13px;z-index:70;opacity:0;pointer-events:none;transition:opacity .25s}
#aviso.on{opacity:1}