/* La Santa World — vista estilo YouTube, modo oscuro.
   Colores en variables, para cambiarlos en un solo lugar.
   Esta es una vista nueva, aparte de la página actual. */
:root{
  --fondo:#0f0f0f;
  --panel:#212121;
  --panel2:#272727;
  --borde:#3f3f3f;
  --texto:#ffffff;
  --texto2:#aaaaaa;
  --buscador:#121212;
  --buscador-borde:#303030;
  --acento:#ff0000;
  --acento2:#cc0000;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:'Roboto',Arial,sans-serif;font-weight:400}
a{color:var(--texto);text-decoration:none}
a:hover{text-decoration:underline}
/* Barra superior fija */
.topbar{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--fondo);border-bottom:1px solid var(--borde);z-index:10}
.topbar button{background:none;border:0;color:var(--texto);font-size:20px;cursor:pointer}
.logo{font-weight:700;font-size:18px;white-space:nowrap}
.logo span{color:var(--acento)}
.buscador{flex:1;display:flex;justify-content:center}
.buscador input{width:100%;max-width:560px;background:var(--buscador);border:1px solid var(--buscador-borde);border-radius:20px 0 0 20px;color:var(--texto);padding:10px 16px}
.buscador button{background:var(--panel);border:1px solid var(--buscador-borde);border-left:0;border-radius:0 20px 20px 0;padding:10px 20px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acento);display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;position:relative}
.avatar-menu{display:none;position:absolute;top:40px;right:0;background:var(--panel2);border:1px solid var(--borde);border-radius:8px;padding:8px;min-width:180px}
.avatar-menu a{display:block;padding:8px}
.avatar-menu.abierto{display:block}
/* Menú lateral */
.layout{display:flex;padding-top:56px}
.sidebar{width:240px;min-width:240px;background:var(--fondo);padding:12px;position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto}
.sidebar.cerrado{display:none}
.sidebar a{display:block;padding:10px 12px;border-radius:8px}
.sidebar a:hover,.sidebar a.activo{background:var(--panel2);text-decoration:none}
main{flex:1;padding:20px;min-width:0}
h1{font-size:20px;font-weight:500}
h2{font-size:18px;font-weight:500}
p,li{color:var(--texto2);line-height:1.5}
p strong,li strong{color:var(--texto)}
/* Grilla de tarjetas, como YouTube */
.grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.grilla{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.grilla{grid-template-columns:repeat(2,1fr)}.sidebar{display:none}.sidebar.abierto{display:block;position:fixed;left:0;top:56px;bottom:0;z-index:20;background:var(--fondo);border-right:1px solid var(--borde)}}
@media(max-width:500px){.grilla{grid-template-columns:1fr}}
.tarjeta{background:var(--fondo);cursor:pointer}
.miniatura{position:relative;aspect-ratio:16/9;background:var(--panel2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden}
.miniatura img{width:100%;height:100%;object-fit:cover}
.duracion{position:absolute;right:8px;bottom:8px;background:#000;padding:2px 6px;border-radius:4px;font-size:12px;color:#fff}
.tarjeta h3{font-size:15px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 4px}
.meta{font-size:13px;color:var(--texto2)}
.etiqueta{display:inline-block;background:var(--panel2);border:1px solid var(--borde);border-radius:12px;padding:2px 8px;font-size:12px;color:var(--texto2)}
/* Shorts: tarjetas verticales */
.shorts{display:flex;gap:16px;overflow:auto;padding-bottom:8px}
.shorts .tarjeta{min-width:180px}
.shorts .miniatura{aspect-ratio:9/16}
/* Vista de reproducción, dos columnas */
.watch{display:grid;grid-template-columns:1fr 360px;gap:24px}
@media(max-width:900px){.watch{grid-template-columns:1fr}}
.reproductor{aspect-ratio:16/9;background:#000;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.reproductor .play{font-size:48px}
.canal{display:flex;align-items:center;gap:12px}
.btn-rojo{background:var(--acento);color:#fff;border:0;border-radius:20px;padding:10px 18px;font-weight:500;cursor:pointer}
.btn-rojo:hover{background:var(--acento2)}
.btn-gris{background:var(--panel2);color:var(--texto);border:1px solid var(--borde);border-radius:20px;padding:10px 18px;cursor:pointer}
.descripcion{background:var(--panel2);border-radius:12px;padding:16px}
.sugerido{display:flex;gap:8px;margin-bottom:12px}
.sugerido .miniatura{width:168px;min-width:168px;aspect-ratio:16/9}
/* Studio */
.studio{display:flex;padding-top:56px}
.studio-sidebar{width:240px;min-width:240px;background:var(--panel);padding:12px;position:sticky;top:56px;height:calc(100vh - 56px)}
.studio-sidebar a{display:block;padding:10px 12px;border-radius:8px}
.studio-sidebar a.activo{background:var(--panel2)}
.tab{display:none}
.tab.activo{display:block}
.metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:800px){.metricas{grid-template-columns:1fr}}
.metrica{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:16px}
.metrica strong{font-size:26px;color:var(--texto);display:block}
table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--borde);font-size:14px}
th{color:var(--texto2);font-weight:500}
tr:hover td{background:var(--panel2)}
tr .acciones{opacity:0}
tr:hover .acciones{opacity:1}
.acciones button{background:none;border:0;color:var(--texto);cursor:pointer;font-size:16px}
input,textarea,select{background:var(--buscador);border:1px solid var(--buscador-borde);border-radius:8px;color:var(--texto);padding:10px;width:100%;margin:6px 0 12px}
label{font-size:14px}
.grafico{display:flex;align-items:flex-end;gap:8px;height:160px;background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:16px}
.barra{flex:1;background:var(--acento);border-radius:6px 6px 0 0;min-height:10px}
.msg{color:var(--texto2)}