@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&display=swap');
:root{
/* ── Colores ── */
--canvas:#f2f1f3;
--white:#ffffff;
--hairline:#e5e4e7;
--mist:#97979b;
--slate:#6e6e73;
--ink:#19171c;
--azul:#1668ff;
--azul-claro:#00b2ff;
--plum:#17082c;
--lilac:#a981ff;
--lavender:#cab3f8;
--blue:#00b2ff;
--sky:#e6f4ff;
--volt:#f5ff63;
/* ── Tipografía ── */
--display:'Inter Tight',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--ui:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* ── Espaciado ── */
--s4:4px; --s8:8px; --s12:12px; --s20:20px; --s24:24px; --s32:32px;
--s40:40px; --s60:60px; --s80:80px; --s100:100px;
--page:1200px;
/* ── Radios ── */
--r-card:40px; --r-btn:50px; --r-badge:40px; --r-input:26px; --r-nav:20px;
/* ── Sombras difusas de cuatro capas ── */
--sh-card:
rgba(25,23,28,.01) 0 152px 61px 0, rgba(25,23,28,.05) 0 85px 51px 0,
rgba(25,23,28,.09) 0 38px 38px 0, rgba(25,23,28,.10) 0 9px 21px 0;
--sh-tile:
rgba(0,0,0,.01) 0 119px 48px 0, rgba(0,0,0,.05) 0 67px 40px 0,
rgba(0,0,0,.09) 0 30px 30px 0, rgba(0,0,0,.10) 0 7px 16px 0;
--sh-subtle:
rgba(25,23,28,.04) 0 4px 12px 0, rgba(25,23,28,.03) 0 1px 3px 0;
--sh-float:
rgba(0,0,0,.01) 0 63px 25px 0, rgba(0,0,0,.05) 0 35px 21px 0,
rgba(0,0,0,.09) 0 16px 16px 0, rgba(0,0,0,.10) 0 4px 9px 0;
/* El tema activo pinta el acento; app.js lo reescribe */
--acc:#1668ff;
--acc-tx:#ffffff;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--canvas);color:var(--ink);
font-family:var(--ui);font-size:16px;line-height:1.5;font-weight:400;
-webkit-font-smoothing:antialiased;min-height:100vh;
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
img{max-width:100%;display:block}
::selection{background:var(--lavender);color:var(--plum)}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--s24)}
/* Display: Inter Tight, tracking cerrado, interlínea comprimida */
.d1,.d2,.d3{font-family:var(--display);font-weight:750;color:var(--ink)}
.d1{font-size:clamp(38px,6.6vw,80px);line-height:.95;letter-spacing:-.032em}
.d2{font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.03em}
.d3{font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.026em}
/* ─────────── NAV ─────────── */
.topnav{
position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s24);
flex-wrap:wrap;background:var(--canvas);padding:var(--s20) 0;
}
.topnav .brand{font-family:var(--display);font-weight:800;font-size:19px;
letter-spacing:-.03em;display:inline-flex;align-items:center;gap:var(--s8)}
.topnav .brand i{width:10px;height:10px;border-radius:50%;background:var(--azul);
display:block;flex:none}
.topnav .role{font-size:14px;color:var(--slate);margin-right:auto}
/* Pestañas, tema y avatar van juntos a la derecha, con la marca sola a la
izquierda. Agrupados, porque si no al estrecharse la ventana el avatar
caía a la línea de abajo pegado al borde izquierdo. */
.nav-der{display:flex;align-items:center;gap:var(--s12);margin-left:auto;
flex-wrap:wrap;justify-content:flex-end}
.tabs{display:flex;gap:var(--s4);background:var(--white);border-radius:var(--r-nav);
padding:var(--s4);box-shadow:var(--sh-float)}
.tabs button{font-size:14px;font-weight:500;color:var(--slate);padding:8px 16px;
border-radius:14px;transition:.15s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--white)}
.status{display:inline-flex;align-items:center;gap:var(--s8);
border-radius:var(--r-btn);padding:10px 20px;font-size:14px;font-weight:500;
background:var(--ink);color:var(--white)}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--volt)}
.hairline{height:1px;background:var(--hairline);border:0;margin:0}
/* ─────────── BOTONES ─────────── */
.btn{
display:inline-flex;align-items:center;gap:var(--s8);border-radius:var(--r-btn);
padding:14px 28px;font-size:16px;font-weight:600;background:var(--ink);
color:var(--white);transition:.18s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-float)}
.btn.acc{background:var(--acc);color:var(--acc-tx)}
.btn.ghost{background:var(--white);color:var(--ink);box-shadow:var(--sh-subtle)}
.btn.ghost:hover{box-shadow:var(--sh-float)}
.btn.icon{padding:14px 18px}
.btn.sm{padding:10px 20px;font-size:14px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn.danger{background:var(--white);color:#d1495b}
/* ─────────── BADGES ─────────── */
.badge{
display:inline-block;border-radius:var(--r-badge);padding:6px 16px;
font-size:13px;font-weight:600;background:var(--acc);color:var(--acc-tx);
}
.badge.pale{background:var(--white);color:var(--slate);box-shadow:var(--sh-subtle)}
.badge.ink{background:var(--ink);color:var(--white)}
/* Selector de cadencia */
.cadencia{display:flex;gap:var(--s8);background:var(--white);padding:var(--s4);
border-radius:var(--r-btn);box-shadow:var(--sh-float)}
.cadencia button{border-radius:var(--r-btn);padding:10px 22px;font-size:14px;
font-weight:600;color:var(--slate);transition:.15s;white-space:nowrap}
.cadencia button:hover{color:var(--ink)}
.cadencia button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
/* ─────────── HERO ─────────── */
.hero{padding-top:var(--s32)}
.hero-head{display:flex;justify-content:space-between;align-items:flex-end;
gap:var(--s24);flex-wrap:wrap;margin-bottom:var(--s24)}
.hero-nota{font-size:14px;color:var(--slate);margin-top:var(--s8)}
.hero-title{margin:var(--s20) 0 var(--s32);max-width:17ch}
.hero-art{
position:relative;border-radius:var(--r-card);overflow:hidden;
background:var(--white);aspect-ratio:16/9;box-shadow:var(--sh-card);
}
.hero-art iframe{width:100%;height:100%;border:0;display:block}
.hero-art .play{position:relative;display:block;width:100%;height:100%;padding:0}
.hero-art .play img{width:100%;height:100%;object-fit:cover}
.hero-art .play-btn{position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;transition:.2s}
.hero-art .play-btn i{
display:flex;align-items:center;justify-content:center;
width:96px;height:96px;border-radius:50%;background:var(--acc);
box-shadow:var(--sh-float);transition:transform .2s;
}
.hero-art .play:hover .play-btn i{transform:scale(1.08)}
.hero-art .play-btn svg{width:30px;height:34px;margin-left:5px}
.dur{
position:absolute;right:var(--s20);bottom:var(--s20);background:var(--ink);
color:var(--white);border-radius:var(--r-badge);padding:6px 16px;
font-size:13px;font-weight:600;
}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s24);
margin-top:var(--s24);font-size:15px;color:var(--slate)}
.hero-meta b{color:var(--ink);font-weight:600}
.hero-tags{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s20)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s12);margin-top:var(--s32);
align-items:center}
/* Índice de aceptación */
.acept{display:flex;align-items:center;gap:var(--s20);margin-top:var(--s24);
background:var(--white);border-radius:var(--r-btn);padding:14px 24px;
box-shadow:var(--sh-float);width:fit-content;max-width:100%;flex-wrap:wrap}
.acept .bar{display:block;width:200px;height:10px;background:var(--hairline);
border-radius:var(--r-btn);overflow:hidden}
.acept .fill{display:block;height:100%;background:var(--acc);
border-radius:var(--r-btn);transition:width .4s}
.acept .n{font-size:14px;color:var(--slate);font-weight:500}
.acept .n b{color:var(--ink);font-weight:700}
/* ─────────── SECCIONES ─────────── */
.sec{margin-top:var(--s100)}
.sec-title{margin:var(--s12) 0 var(--s32)}
.sub-title{margin:var(--s80) 0 var(--s24)}
/* ─────────── CUADRÍCULA DE TARJETAS ─────────── */
.cuadricula{
display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:var(--s24);
}
.celda{
display:flex;flex-direction:column;gap:var(--s12);background:var(--white);
border-radius:var(--r-card);padding:var(--s12) var(--s12) var(--s24);
box-shadow:var(--sh-tile);transition:transform .2s,box-shadow .2s;
}
.celda:hover{transform:translateY(-6px);box-shadow:var(--sh-card)}
.celda-th{position:relative;display:block;border-radius:28px;overflow:hidden;
background:var(--hairline);aspect-ratio:16/9}
.celda-th img{width:100%;height:100%;object-fit:cover}
.celda-th .dur{right:var(--s12);bottom:var(--s12);padding:4px 12px;font-size:12px}
.celda-cuerpo{display:flex;flex-direction:column;gap:var(--s8);
padding:0 var(--s12);flex:1}
.celda-ti{font-family:var(--display);font-weight:700;font-size:19px;
line-height:1.2;letter-spacing:-.02em;color:var(--ink);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.celda-ca{font-size:14px;color:var(--slate);font-weight:500}
.celda-pie{display:flex;justify-content:space-between;align-items:center;
gap:var(--s12);margin-top:auto;padding-top:var(--s8);font-size:13px;
color:var(--mist)}
.pip{display:inline-flex;align-items:center;gap:6px;font-size:12px;
font-weight:700;border-radius:var(--r-badge);padding:4px 12px}
/* ─────────── TARJETAS Y NOTAS ─────────── */
.card{background:var(--white);border-radius:var(--r-card);padding:var(--s40);
box-shadow:var(--sh-tile)}
.card h3{font-family:var(--display);font-weight:700;font-size:22px;
letter-spacing:-.02em;margin-bottom:var(--s12)}
.card p{font-size:16px;color:var(--slate)}
.card p b{color:var(--ink);font-weight:600}
.note{background:var(--white);border-radius:var(--r-card);padding:var(--s40);
font-size:17px;color:var(--slate);box-shadow:var(--sh-tile)}
.note b{color:var(--ink);font-weight:600}
.note button{color:var(--azul);font-weight:600;text-decoration:underline}
/* ─────────── CHIPS ─────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s12)}
.chip{
position:relative;background:var(--white);border-radius:32px;
padding:var(--s20) var(--s24);text-align:left;max-width:310px;
box-shadow:var(--sh-subtle);transition:.18s;border:2px solid transparent;
}
.chip:hover{transform:translateY(-3px);box-shadow:var(--sh-float)}
.chip[aria-pressed="true"]{border-color:var(--c,var(--ink))}
.chip b{display:flex;align-items:center;gap:var(--s8);font-family:var(--display);
font-weight:700;font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.chip b::before{content:'';width:12px;height:12px;border-radius:50%;
background:var(--c,var(--ink));flex:none}
.chip small{display:block;font-size:14px;color:var(--slate);line-height:1.4}
.chips.tight .chip{padding:var(--s12) var(--s24);border-radius:var(--r-btn)}
.chips.tight .chip b{font-size:16px;margin:0}
.chips.tight .chip b::before{display:none}
.chips.tight .chip small{font-size:13px}
/* ─────────── FORM ─────────── */
.field{display:block;margin-bottom:var(--s12);max-width:560px}
.field span{display:block;font-size:13px;font-weight:600;color:var(--slate);
margin-bottom:var(--s8)}
.field input{width:100%;background:var(--canvas);border:2px solid transparent;
border-radius:var(--r-input);padding:14px 22px;color:var(--ink);
font:inherit;font-size:15px}
.field input:focus{outline:none;border-color:var(--azul);background:var(--white)}
/* Al textarea le faltaban los estilos base y salía con la pinta por
defecto del navegador: minúsculo, monoespaciado y con tirador. */
.field textarea{
width:100%;background:var(--canvas);border:2px solid transparent;
border-radius:24px;padding:16px 22px;color:var(--ink);font:inherit;
font-size:15px;line-height:1.55;min-height:150px;resize:vertical;
display:block;
}
.field textarea:focus{outline:none;border-color:var(--azul);background:var(--white)}
.field textarea::placeholder,.field input::placeholder{color:var(--mist)}
.rowbtns{display:flex;gap:var(--s12);flex-wrap:wrap;margin-top:var(--s20)}
.msg{font-size:15px;margin-top:var(--s12);color:var(--slate);min-height:1px}
.msg.ok{color:#0a8f5b;font-weight:500}
.msg.err{color:#d1495b;font-weight:500}
details{margin-top:var(--s24);font-size:15px;color:var(--slate)}
summary{cursor:pointer;color:var(--azul);font-weight:600;margin-bottom:var(--s12)}
details ol{padding-left:20px;margin:var(--s12) 0}
details li{margin-bottom:var(--s8)}
code{background:var(--canvas);padding:3px 10px;border-radius:var(--r-badge);
font-size:13px;word-break:break-all}
/* Barras del perfil */
.pbar{display:grid;grid-template-columns:minmax(0,1fr) 220px 50px;gap:var(--s20);
align-items:center;margin-bottom:var(--s12);font-size:16px;font-weight:500}
.pbar .track{display:block;height:10px;background:var(--canvas);
border-radius:var(--r-btn);overflow:hidden}
.pbar .fill{display:block;height:100%;border-radius:var(--r-btn)}
.pbar .n{font-size:14px;color:var(--mist);text-align:right;font-weight:600}
/* ─────────── ONBOARDING ─────────── */
.wiz{max-width:900px;margin:var(--s60) auto var(--s100);background:var(--white);
border-radius:var(--r-card);padding:clamp(28px,5vw,60px);box-shadow:var(--sh-card)}
.wiz .lede{font-size:18px;color:var(--slate);margin:var(--s12) 0 var(--s32);
max-width:52ch}
.wiz-nav{display:flex;align-items:center;gap:var(--s12);margin-top:var(--s40);
padding-top:var(--s32);border-top:1px solid var(--hairline)}
.wiz-nav .count{margin-right:auto;font-size:14px;color:var(--mist);font-weight:500}
/* ─────────── CARGANDO ─────────── */
.cargando{display:flex;align-items:center;gap:var(--s12);background:var(--white);
border-radius:var(--r-card);padding:var(--s40);font-size:16px;color:var(--slate);
box-shadow:var(--sh-tile)}
.spin{width:18px;height:18px;border:3px solid var(--hairline);
border-top-color:var(--azul);border-radius:50%;
animation:giro .8s linear infinite;flex:none}
@keyframes giro{to{transform:rotate(360deg)}}
/* ─────────── VARIOS ─────────── */
.toast{position:fixed;left:50%;bottom:var(--s32);transform:translateX(-50%);
background:var(--ink);color:var(--white);border-radius:var(--r-btn);
padding:14px 28px;font-size:15px;font-weight:500;z-index:99;
box-shadow:var(--sh-float)}
footer{margin-top:var(--s100);padding:var(--s40) 0 var(--s60);
border-top:1px solid var(--hairline);font-size:14px;color:var(--mist)}
/* El nav no debe envolverse nunca: es sticky y comerse 150px de alto
deja la página sin aire. El descriptor es lo primero que sobra. */
@media (max-width:1080px){
.topnav .role{display:none}
}
@media (max-width:720px){
.topnav .status{padding:8px 14px;font-size:13px}
.topnav .brand{font-size:16px}
}
@media (max-width:860px){
.topnav{gap:var(--s12);padding:var(--s12) 0}
.pbar{grid-template-columns:1fr 110px 44px;gap:var(--s12)}
.card,.note,.cargando{padding:var(--s24)}
.acept{width:100%}
.acept .bar{width:100%;min-width:140px}
}
/* Aviso de que la miniatura abre en otra pestaña */
.hero-art .nueva{
position:absolute;left:var(--s20);bottom:var(--s20);background:var(--white);
color:var(--ink);border-radius:var(--r-badge);padding:6px 16px;
font-size:13px;font-weight:600;box-shadow:var(--sh-float);
opacity:.9;transition:.2s;
}
.hero-art .play:hover .nueva{opacity:1}
/* ═══════════ VEREDICTO DE LOS COMENTARIOS ═══════════ */
.veredicto{
margin-top:var(--s20);background:var(--white);border-radius:32px;
padding:var(--s20) var(--s24);box-shadow:var(--sh-tile);
border-left:6px solid var(--hairline);max-width:640px;
}
.veredicto.bien{border-left-color:#00d4a0}
.veredicto.neutro{border-left-color:var(--hairline)}
.veredicto.mal{border-left-color:#ff5c8a}
.veredicto-cab{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s12);
align-items:baseline;justify-content:space-between}
.veredicto-cab b{font-family:var(--display);font-weight:700;font-size:17px;
letter-spacing:-.02em}
.veredicto-cab span{font-size:13px;color:var(--mist)}
.veredicto blockquote{margin:var(--s12) 0 0;font-size:15px;color:var(--slate);
line-height:1.45}
.veredicto cite{display:block;margin-top:6px;font-style:normal;font-size:12px;
font-weight:600;color:var(--mist)}
.veredicto.cargando-ver{display:flex;align-items:center;gap:var(--s12);
font-size:14px;color:var(--slate);border-left-color:var(--azul)}
.sub-title .cuenta{font-family:var(--ui);font-size:14px;font-weight:500;
color:var(--mist);margin-left:var(--s12)}
.note.flaco{margin-bottom:var(--s24);font-size:15px;padding:var(--s20) var(--s24);
border-left:6px solid var(--volt)}
.note.flaco button{color:var(--azul);font-weight:600;text-decoration:underline}
/* ═══════════ EL MURO ═══════════ */
.resena{background:var(--white);border-radius:var(--r-card);padding:var(--s20);
box-shadow:var(--sh-tile);display:flex;flex-direction:column;gap:var(--s12);
transition:transform .2s,box-shadow .2s}
.resena:hover{transform:translateY(-5px);box-shadow:var(--sh-card)}
/* Sin miniatura, la nota ES el póster de la reseña */
.nota-tile{border-radius:28px;padding:var(--s24);display:flex;align-items:flex-end;
justify-content:space-between;gap:var(--s12);min-height:130px;color:var(--plum);
position:relative;overflow:hidden}
.nota-num{font-family:var(--display);font-weight:800;font-size:62px;line-height:.8;
letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.nota-num small{font-size:20px;font-weight:600;opacity:.55;letter-spacing:-.02em}
.nota-tile .barra{position:absolute;left:0;right:0;bottom:0;height:7px;
background:rgba(23,8,44,.14)}
.nota-tile .barra i{display:block;height:100%;background:rgba(23,8,44,.55)}
.nota-tile .quien{font-size:12px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;opacity:.7;text-align:right;max-width:11ch;line-height:1.3}
.resena-ti{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.22;
letter-spacing:-.022em}
.resena-ti a:hover{text-decoration:underline;text-decoration-color:var(--azul);
text-underline-offset:3px}
.resena-tx{font-size:15px;color:var(--slate);line-height:1.55}
.resena-pie{display:flex;align-items:center;gap:var(--s8);margin-top:auto;
padding-top:var(--s12);border-top:1px solid var(--hairline);flex-wrap:wrap}
.estrella{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-btn);
padding:8px 15px;font-size:14px;font-weight:700;background:var(--canvas);
transition:.15s;font-variant-numeric:tabular-nums}
.estrella:hover{background:var(--hairline)}
.estrella[aria-pressed="true"]{background:var(--volt);color:var(--plum)}
.comentar{font-size:14px;font-weight:600;color:var(--slate);padding:8px 12px;
border-radius:var(--r-btn)}
.comentar:hover{color:var(--ink);background:var(--canvas)}
.ver-yt{margin-left:auto;font-size:13px;font-weight:600;color:var(--azul)}
.ver-yt:hover{text-decoration:underline}
/* Deslizador de la nota */
.slider-fila{display:flex;align-items:center;gap:var(--s20);flex-wrap:wrap}
.slider-fila input[type=range]{flex:1;min-width:200px;accent-color:var(--azul)}
.nota-viva{font-family:var(--display);font-weight:800;font-size:42px;line-height:1;
letter-spacing:-.04em;min-width:94px;text-align:center;border-radius:20px;
padding:10px 8px;color:var(--plum);font-variant-numeric:tabular-nums}
.escala{display:flex;justify-content:space-between;font-size:12px;color:var(--mist);
margin-top:6px;font-weight:500}
.ayuda{display:block;font-size:13px;color:var(--mist);margin-top:var(--s8)}
/* Capa modal */
.telon{position:fixed;inset:0;background:rgba(23,8,44,.45);z-index:60;display:flex;
justify-content:center;align-items:flex-start;overflow-y:auto;padding:var(--s40) var(--s20)}
.hoja{background:var(--white);border-radius:var(--r-card);padding:var(--s40);
max-width:680px;width:100%;box-shadow:var(--sh-card)}
.hoja-cab{display:flex;justify-content:space-between;align-items:flex-start;
gap:var(--s20);margin-bottom:var(--s20)}
.cerrar{width:42px;height:42px;border-radius:50%;background:var(--canvas);font-size:18px;
flex:none;display:flex;align-items:center;justify-content:center}
.cerrar:hover{background:var(--hairline)}
.comentarios{display:flex;flex-direction:column;gap:var(--s12);margin-top:var(--s12)}
.com{display:flex;gap:var(--s12);padding-top:var(--s20);border-top:1px solid var(--hairline)}
.avatar{width:36px;height:36px;border-radius:50%;flex:none;font-size:14px;font-weight:700;
display:flex;align-items:center;justify-content:center;color:var(--white);
font-family:var(--display)}
.com-cuerpo b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.015em}
.com-cuerpo time{font-size:12px;color:var(--mist);margin-left:var(--s8)}
.com-cuerpo p{font-size:15px;color:var(--slate);line-height:1.5;margin-top:3px}
/* ═══════════════════════ TEMA OSCURO ═══════════════════════
Solo se redefinen los tokens; ningún componente sabe en qué tema
está. El sistema de Jitter es claro de origen, así que el oscuro
conserva su geometría y su azul, subido de luminosidad para que
siga leyéndose sobre fondo oscuro.
Tres estados: sin marcar sigue al sistema operativo, y las marcas
data-theme ganan en ambos sentidos cuando eliges a mano. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--canvas:#111015;
--white:#1b1a21; /* superficie de tarjeta */
--hairline:#2b2933;
--mist:#77757f;
--slate:#a6a4b0;
--ink:#f1f0f4; /* texto principal */
--azul:#5b9bff;
--sky:#16233a;
--sh-card:
rgba(0,0,0,.20) 0 100px 60px 0, rgba(0,0,0,.28) 0 40px 34px 0,
rgba(0,0,0,.34) 0 10px 18px 0;
--sh-tile:
rgba(0,0,0,.18) 0 60px 40px 0, rgba(0,0,0,.26) 0 24px 24px 0,
rgba(0,0,0,.30) 0 6px 12px 0;
--sh-subtle: rgba(0,0,0,.34) 0 3px 10px 0;
--sh-float:
rgba(0,0,0,.22) 0 24px 22px 0, rgba(0,0,0,.30) 0 6px 12px 0;
}
}
:root[data-theme="dark"]{
--canvas:#111015;
--white:#1b1a21;
--hairline:#2b2933;
--mist:#77757f;
--slate:#a6a4b0;
--ink:#f1f0f4;
--azul:#5b9bff;
--sky:#16233a;
--sh-card:
rgba(0,0,0,.20) 0 100px 60px 0, rgba(0,0,0,.28) 0 40px 34px 0,
rgba(0,0,0,.34) 0 10px 18px 0;
--sh-tile:
rgba(0,0,0,.18) 0 60px 40px 0, rgba(0,0,0,.26) 0 24px 24px 0,
rgba(0,0,0,.30) 0 6px 12px 0;
--sh-subtle: rgba(0,0,0,.34) 0 3px 10px 0;
--sh-float:
rgba(0,0,0,.22) 0 24px 22px 0, rgba(0,0,0,.30) 0 6px 12px 0;
}
/* Retoques que el simple cambio de tokens no cubre */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .btn:hover{filter:brightness(1.12)}
:root:not([data-theme="light"]) .celda-th,
:root:not([data-theme="light"]) .resena-th{background:#0b0a0e}
:root:not([data-theme="light"]) .field input,
:root:not([data-theme="light"]) .field textarea{background:#131218}
:root:not([data-theme="light"]) .telon{background:rgba(0,0,0,.66)}
}
:root[data-theme="dark"] .btn:hover{filter:brightness(1.12)}
:root[data-theme="dark"] .celda-th,
:root[data-theme="dark"] .resena-th{background:#0b0a0e}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea{background:#131218}
:root[data-theme="dark"] .telon{background:rgba(0,0,0,.66)}
/* ═══════════ MINIATURA DE LA RESEÑA ═══════════
Con portada, la nota deja de ser el póster y pasa a ser una insignia
sobre ella. hqdefault existe siempre; el recorte se come sus bandas. */
.resena-th{position:relative;display:block;border-radius:28px;overflow:hidden;
background:var(--hairline);aspect-ratio:16/9}
.resena-th img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .35s}
.resena:hover .resena-th img{transform:scale(1.04)}
.resena-th .nota-insignia{
position:absolute;left:var(--s12);top:var(--s12);border-radius:20px;
padding:8px 14px 7px;font-family:var(--display);font-weight:800;font-size:26px;
line-height:1;letter-spacing:-.04em;color:#17082c;
font-variant-numeric:tabular-nums;box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.resena-th .nota-insignia small{font-size:12px;font-weight:700;opacity:.6}
.resena-th .autor{
position:absolute;right:var(--s12);top:var(--s12);border-radius:var(--r-btn);
padding:5px 12px;font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;background:rgba(12,12,12,.72);color:#fff;
backdrop-filter:blur(4px);max-width:52%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;
}
/* ═══════════ USUARIO EN LA BARRA ═══════════ */
.usuario{position:relative;flex:none}
.usuario-btn{display:inline-flex;align-items:center;gap:var(--s8);
background:var(--white);border-radius:var(--r-btn);padding:6px 14px 6px 6px;
font-size:14px;font-weight:600;box-shadow:var(--sh-subtle);transition:.15s;
max-width:220px}
.usuario-btn:hover{box-shadow:var(--sh-float)}
.usuario-btn img,.usuario-btn .ini{width:30px;height:30px;border-radius:50%;
flex:none;object-fit:cover}
.usuario-btn .ini{display:flex;align-items:center;justify-content:center;
background:var(--azul);color:#fff;font-family:var(--display);
font-weight:700;font-size:13px}
.usuario-btn .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-usuario{position:absolute;right:0;top:calc(100% + 8px);background:var(--white);
border-radius:24px;box-shadow:var(--sh-card);padding:var(--s8);min-width:230px;
z-index:40;display:flex;flex-direction:column;gap:2px}
.menu-usuario .quien-soy{padding:var(--s12) var(--s12) var(--s8);
border-bottom:1px solid var(--hairline);margin-bottom:var(--s4)}
.menu-usuario .quien-soy b{display:block;font-family:var(--display);font-weight:700;
font-size:15px;letter-spacing:-.015em}
.menu-usuario .quien-soy span{font-size:12px;color:var(--mist)}
.menu-usuario button{text-align:left;padding:11px var(--s12);border-radius:16px;
font-size:14px;font-weight:500;color:var(--ink)}
.menu-usuario button:hover{background:var(--canvas)}
.menu-usuario button.salir{color:#d1495b}
/* Interruptor de tema */
.tema{width:40px;height:40px;border-radius:50%;background:var(--white);
box-shadow:var(--sh-subtle);display:flex;align-items:center;justify-content:center;
font-size:16px;flex:none;transition:.15s}
.tema:hover{box-shadow:var(--sh-float)}
/* Acciones deshabilitadas para quien no ha entrado */
.estrella:disabled,.comentar:disabled{opacity:.45;cursor:not-allowed}
.estrella:disabled:hover{background:var(--canvas)}
.aviso-entrar{font-size:13px;color:var(--mist);margin-left:auto}
/* ═══════════ ACCIONES EN CADA TARJETA ═══════════
Al quitar la recomendación única, votar y bloquear se mudan aquí. */
.celda{position:relative}
.celda-ti{display:block;color:inherit}
.celda-ti:hover{text-decoration:underline;text-decoration-color:var(--azul);
text-underline-offset:3px}
.celda .acept-pip{position:absolute;left:var(--s12);top:var(--s12);
box-shadow:0 3px 10px rgba(0,0,0,.3)}
.acciones{display:flex;gap:2px;flex:none}
.acciones button{width:30px;height:30px;border-radius:50%;font-size:13px;
display:flex;align-items:center;justify-content:center;opacity:.5;
transition:.14s;line-height:1}
.acciones button:hover{opacity:1;background:var(--canvas)}
.celda:hover .acciones button{opacity:.85}
.veredicto-mini{font-size:12px;font-weight:600;border-radius:var(--r-btn);
padding:3px 11px;align-self:flex-start;line-height:1.35}
.veredicto-mini.bien{background:rgba(0,212,160,.16);color:#00805f}
.veredicto-mini.mal{background:rgba(255,92,138,.16);color:#c22a53}
:root[data-theme="dark"] .veredicto-mini.bien{color:#3fe0b4}
:root[data-theme="dark"] .veredicto-mini.mal{color:#ff8fb0}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .veredicto-mini.bien{color:#3fe0b4}
:root:not([data-theme="light"]) .veredicto-mini.mal{color:#ff8fb0}
}
.hoja .hero-art{aspect-ratio:16/9;border-radius:var(--r-tile);overflow:hidden;
background:#000}
.hoja .hero-art iframe{width:100%;height:100%;border:0;display:block}
.selector{background:var(--canvas);border:2px solid transparent;
border-radius:var(--r-input);padding:13px 20px;color:var(--ink);
font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.selector:focus{outline:none;border-color:var(--azul);background:var(--white)}
/* ═══════════ FILTROS DE CATEGORÍA ═══════════ */
.filtros{display:flex;justify-content:space-between;align-items:center;
gap:var(--s12);flex-wrap:wrap;margin-top:var(--s40);min-height:48px}
.filtros .controles{display:flex;align-items:center;gap:var(--s12);
flex-wrap:wrap;margin-left:auto}
.chips-filtro{display:flex;flex-wrap:wrap;gap:var(--s8)}
.chips-filtro button{
display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-btn);
padding:9px 18px;font-size:14px;font-weight:600;background:var(--white);
color:var(--slate);box-shadow:var(--sh-subtle);transition:.15s;
border:2px solid transparent;
}
.chips-filtro button:hover{color:var(--ink);border-color:var(--c,var(--ink))}
.chips-filtro button[aria-pressed="true"],
.chips-filtro button[aria-checked="true"]{
background:var(--c,var(--ink));color:var(--ctx,#fff);box-shadow:var(--sh-float)}
.chips-filtro .n{font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
/* La categoría, sobre la miniatura */
.cat-pip{position:absolute;left:var(--s12);bottom:var(--s12);border-radius:var(--r-btn);
padding:4px 12px;font-size:11px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.28);
max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.celda .acept-pip{left:auto;right:var(--s12);top:var(--s12);font-size:17px;
font-family:var(--display);font-weight:800;padding:5px 12px;letter-spacing:-.02em}
.celda .acept-pip small{font-size:10px;font-weight:700;opacity:.6}
/* Autor bajo la reseña */
.celda .autor{display:inline-flex;align-items:center;gap:7px;font-size:13px;
font-weight:600;color:var(--slate);border-radius:var(--r-btn);padding:4px 10px 4px 4px;
transition:.15s;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.celda .autor:hover{background:var(--canvas);color:var(--ink)}
.celda .autor .avatar{width:24px;height:24px;font-size:11px}
.celda .resena-tx{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;
-webkit-box-orient:vertical;overflow:hidden}
.celda .acciones{gap:var(--s4)}
.celda .estrella{padding:6px 12px;font-size:13px}
.celda .comentar{padding:6px 10px;font-size:13px}
/* Vista previa al pegar el link */
.vista-previa{display:flex;gap:var(--s16,16px);align-items:center;background:var(--canvas);
border-radius:24px;padding:var(--s12);margin-bottom:var(--s20)}
.vista-previa img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:16px;flex:none}
.vista-previa b{display:block;font-family:var(--display);font-weight:700;font-size:16px;
letter-spacing:-.018em;line-height:1.25}
.vista-previa span{display:block;font-size:13px;color:var(--mist);margin-top:4px}
/* Detalle de la reseña */
.nota-linea{display:flex;align-items:center;gap:var(--s16,16px);margin-top:var(--s20);
font-size:15px}
.nota-linea .nota-viva{min-width:64px;font-size:30px;padding:8px}
.lista-suyas{display:flex;flex-direction:column;gap:var(--s12);margin-top:var(--s24)}
.lista-suyas a{display:flex;gap:var(--s16,16px);align-items:center;background:var(--canvas);
border-radius:24px;padding:var(--s12) var(--s20)}
.lista-suyas a:hover{background:var(--hairline)}
.nota-mini{min-width:48px;height:48px;border-radius:14px;display:flex;align-items:center;
justify-content:center;font-family:var(--display);font-weight:800;font-size:22px;
color:#17082c;flex:none}
.lista-suyas b{display:block;font-family:var(--display);font-weight:700;font-size:15px;
letter-spacing:-.018em;line-height:1.3}
.lista-suyas .fog{display:block;font-size:12px;margin-top:3px}
.lede{font-size:18px;color:var(--slate);max-width:56ch;margin-top:var(--s12)}
.hero .hero-title{margin-bottom:var(--s20)}
/* ═══════════ DENUNCIAS Y MODERACIÓN ═══════════ */
/* Botoncitos bajo cada comentario: presentes, pero que no griten. */
.com-acciones{display:flex;gap:var(--s12);margin-top:6px}
.com-acciones button{font-size:12px;font-weight:600;color:var(--mist);
padding:2px 0;transition:color .15s}
.com-acciones button:hover{color:#d1495b;text-decoration:underline}
/* Elegir el motivo de una denuncia */
/* Rejilla y no flex: así todas las píldoras miden lo mismo aunque el
texto de una sea el doble de largo que el de otra. */
.motivos{display:grid;gap:var(--s8);max-width:560px;
grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.motivo{display:flex;align-items:center;gap:var(--s8);cursor:pointer;
background:var(--canvas);border:2px solid transparent;border-radius:var(--r-badge);
padding:11px 16px;font-size:14px;font-weight:600;color:var(--slate);transition:.15s}
.motivo:hover{background:var(--hairline)}
.motivo input{accent-color:var(--azul);margin:0}
.motivo:has(input:checked){border-color:var(--azul);background:var(--white);
color:var(--ink);box-shadow:var(--sh-subtle)}
.check{display:flex;align-items:center;gap:var(--s12);margin:var(--s20) 0;
font-size:15px;color:var(--slate);cursor:pointer;max-width:560px}
.check input{width:18px;height:18px;accent-color:var(--azul);flex:none;margin:0}
/* El punto rojo del avatar cuando hay denuncias sin ver */
.ping{display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:20px;padding:0 6px;border-radius:10px;
background:#d1495b;color:#fff;font-size:11px;font-weight:700;line-height:1}
.ping.chico{min-width:18px;height:18px;font-size:10px;margin-left:6px}
/* La cola de moderación */
.cola-mod{display:flex;flex-direction:column;gap:var(--s16,16px);margin-top:var(--s20)}
.denuncia{background:var(--canvas);border-radius:28px;padding:var(--s24)}
.den-cab{display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap;
font-size:12px;margin-bottom:var(--s12)}
.badge-den{background:#d1495b;color:#fff;border-radius:var(--r-badge);
padding:4px 12px;font-size:12px;font-weight:700}
.den-cita{margin:0;background:var(--white);border-radius:20px;
padding:var(--s16,16px) var(--s20);font-size:15px;color:var(--slate);
line-height:1.5;border-left:4px solid var(--hairline)}
.den-cita b{display:block;color:var(--ink);font-family:var(--display);
font-weight:700;letter-spacing:-.015em;margin-bottom:4px}
.den-txt{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.den-cita cite{display:block;margin-top:var(--s8);font-size:13px;
font-style:normal;font-weight:600;color:var(--mist)}
.den-nota{margin-top:var(--s12);font-size:14px;color:var(--slate);
overflow-wrap:anywhere}
.den-btns{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s16,16px)}
.btn.peq{padding:9px 18px;font-size:14px;border-radius:var(--r-btn)}
.vetado-fila{display:flex;align-items:center;justify-content:space-between;
gap:var(--s12);flex-wrap:wrap;padding:var(--s16,16px) var(--s20)}
.vetado-fila .fog{display:block;font-size:12px;margin-top:2px}
/* ═══════════ DESPLEGABLE DE CATEGORÍAS ═══════════ */
/* Once categorías en fila eran una ensalada. Ahora solo se ve la que tienes
puesta, y el resto vive detrás de un botón. */
.menu-cat{position:relative}
.btn-cat{display:inline-flex;align-items:center;gap:var(--s8);white-space:nowrap;
background:var(--white);border-radius:var(--r-btn);padding:14px 22px;
font-size:14px;font-weight:600;color:var(--ink);box-shadow:var(--sh-float);
transition:.15s}
.btn-cat:hover{transform:translateY(-1px)}
.btn-cat .ch{opacity:.5;transition:transform .18s}
.btn-cat[aria-expanded="true"] .ch{transform:rotate(180deg)}
.punto{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.panel-cat{position:absolute;right:0;top:calc(100% + 10px);z-index:40;
width:max-content;min-width:250px;max-width:min(320px,calc(100vw - 48px));
max-height:min(60vh,420px);overflow-y:auto;
background:var(--white);border-radius:26px;padding:var(--s8);
box-shadow:var(--sh-card)}
.panel-cat hr{border:0;border-top:1px solid var(--hairline);margin:var(--s8) var(--s12)}
.panel-cat .vacio{padding:var(--s12) var(--s16,16px)}
.opcion-cat{display:flex;align-items:center;gap:var(--s12);width:100%;
text-align:left;padding:11px var(--s16,16px);border-radius:18px;
font-size:14px;font-weight:600;color:var(--slate);transition:.13s}
.opcion-cat:hover{background:var(--canvas);color:var(--ink)}
.opcion-cat .et{flex:1;min-width:0}
.opcion-cat .n{font-size:12px;color:var(--mist);font-variant-numeric:tabular-nums}
.opcion-cat[aria-checked="true"]{background:var(--canvas);color:var(--ink)}
.opcion-cat[aria-checked="true"] .et{font-weight:700}
/* La categoría puesta: con su color, y se quita de un clic */
.pildora-filtro{display:inline-flex;align-items:center;gap:var(--s8);
background:var(--c,var(--ink));color:var(--ctx,#fff);border-radius:var(--r-btn);
padding:11px 18px;font-size:14px;font-weight:700;box-shadow:var(--sh-float);
transition:.15s}
.pildora-filtro:hover{transform:translateY(-1px)}
.pildora-filtro .n{font-weight:600;opacity:.7;font-variant-numeric:tabular-nums}
.pildora-filtro .x{font-size:15px;opacity:.75;margin-left:2px}
.pildora-filtro:hover .x{opacity:1}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ═══════════ PESTAÑA GENTE ═══════════ */
.buscador{position:relative;max-width:420px;margin-bottom:var(--s32)}
.buscador input{width:100%;background:var(--white);border:2px solid transparent;
border-radius:var(--r-btn);padding:15px var(--s24) 15px 52px;font:inherit;
font-size:15px;color:var(--ink);box-shadow:var(--sh-subtle);transition:.15s}
.buscador input:focus{outline:none;border-color:var(--azul);box-shadow:var(--sh-float)}
.buscador input::placeholder{color:var(--mist)}
.buscador input::-webkit-search-cancel-button{cursor:pointer}
.buscador .lupa{position:absolute;left:21px;top:50%;margin-top:-9px;
color:var(--mist);pointer-events:none;transition:color .15s}
.buscador:focus-within .lupa{color:var(--azul)}
.perfiles{display:grid;gap:var(--s16,16px);
grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.perfil-card{display:flex;flex-direction:column;gap:var(--s12);text-align:left;
background:var(--white);border-radius:28px;padding:var(--s24);
box-shadow:var(--sh-subtle);transition:.18s;border:2px solid transparent}
.perfil-card:hover{transform:translateY(-2px);box-shadow:var(--sh-float);
border-color:var(--hairline)}
.perfil-card .fila{display:flex;align-items:center;gap:var(--s12);min-width:0}
.perfil-card .avatar{width:44px;height:44px;font-size:17px}
.perfil-card b{font-family:var(--display);font-weight:700;font-size:17px;
letter-spacing:-.02em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.perfil-card .bio{font-size:14px;color:var(--slate);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
.perfil-card .datos{font-size:12.5px;font-weight:600;color:var(--mist);
margin-top:auto;padding-top:var(--s4);font-variant-numeric:tabular-nums}
/* ── El filtro en pantallas estrechas ──
El panel cuelga a la derecha del botón; si el botón está a media pantalla,
el panel se salía por la izquierda. En móvil ocupa el ancho de la fila. */
@media (max-width: 720px){
.filtros{flex-direction:column;align-items:stretch;gap:var(--s12)}
.filtros .controles{margin-left:0;flex-direction:column;
align-items:stretch;gap:var(--s8)}
.cadencia{flex-wrap:wrap;justify-content:center}
.cadencia button{padding:10px 16px;flex:1 1 auto}
.btn-cat{width:100%;justify-content:center}
.panel-cat{left:0;right:0;width:auto;min-width:0;max-width:none}
.pildora-filtro{align-self:flex-start;max-width:100%}
.pildora-filtro span:not(.x):not(.n){overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.perfiles{grid-template-columns:1fr}
.buscador{max-width:none}
}
/* ── Portada compacta ──
El título ocupaba media pantalla y las miniaturas quedaban debajo del
pliegue. Ahora el título y la frase van en la misma fila, y el botón de
publicar baja a la fila de filtros. Lo primero que se ve son los videos. */
.hero-inicio{display:flex;align-items:baseline;gap:var(--s32);flex-wrap:wrap;
padding-top:var(--s24)}
.hero-inicio .hero-title{margin:0;max-width:none;
font-size:clamp(26px,3.2vw,40px)}
.hero-inicio .lede{margin:0;font-size:16px;max-width:46ch;flex:1;min-width:240px}
.filtros{margin-top:var(--s24)}
.filtros .izq{display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap}
/* En el móvil la pantalla es lo escaso. La frase de apoyo se va: el título
ya dice de qué va, y así la primera miniatura sube casi 150 px. */
@media (max-width: 720px){
.hero-inicio{padding-top:var(--s12);gap:var(--s12)}
.hero-inicio .lede{display:none}
.hero-inicio .hero-title{font-size:26px;line-height:1.1}
.filtros{margin-top:var(--s16,16px)}
.filtros .izq{width:100%}
.filtros .izq .btn{flex:1;justify-content:center}
}
/* ═══════════ PANEL DE MODERACIÓN ═══════════ */
.mod-pest{margin:var(--s20) 0 var(--s12);align-self:flex-start;display:inline-flex}
.mod-pest .n{font-size:11px;font-weight:700;background:var(--canvas);
color:var(--slate);border-radius:10px;padding:1px 7px;margin-left:6px}
.mod-pest button[aria-pressed="true"] .n{background:rgba(255,255,255,.22);color:#fff}
.mod-busca{max-width:none;margin:var(--s12) 0 0}
/* Filas de reseña y de persona dentro del panel */
.fila-adm{display:flex;align-items:flex-start;gap:var(--s16,16px);
padding:var(--s16,16px) var(--s20)}
.fila-adm .mini{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:14px;
flex:none;background:var(--hairline)}
.fila-adm .avatar{width:42px;height:42px;font-size:16px;margin-top:2px}
.fila-adm.es-vetado{opacity:.7;border-left:4px solid #d1495b}
.adm-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.adm-txt b{font-family:var(--display);font-weight:700;font-size:15px;
letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere}
.adm-txt .fog{font-size:12px;font-weight:600}
/* .adm-txt es una columna flex, asi que un span suelto se estiraria
a todo el ancho. align-self lo devuelve a su tamano. */
.adm-txt .badge-den{font-size:10px;padding:2px 9px;align-self:flex-start}
.recorte{font-size:13px;color:var(--slate);margin-top:2px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
.adm-btns{display:flex;flex-direction:column;gap:6px;flex:none;align-items:stretch}
.adm-btns .btn{white-space:nowrap;justify-content:center}
.adm-btns .fog{font-size:11px;text-align:center;font-weight:600}
@media (max-width: 720px){
.fila-adm{flex-wrap:wrap}
.fila-adm .mini{width:76px}
.adm-btns{flex-direction:row;flex-wrap:wrap;width:100%;margin-top:var(--s8)}
.adm-btns .btn{flex:1 1 auto}
.mod-pest{width:100%;flex-wrap:wrap}
.mod-pest button{flex:1 1 auto}
}
/* ═══════════ PERFIL ═══════════ */
.perfil-cab{display:flex;align-items:center;gap:var(--s16,16px);min-width:0}
.perfil-cab .avatar{flex:none}
.perfil-bio{margin-top:var(--s16,16px);font-size:16px;color:var(--slate);
line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
img.avatar{object-fit:cover;border-radius:50%;flex:none;display:block}
/* Sus recomendaciones, con miniatura */
.suyas{display:flex;flex-direction:column;gap:var(--s8);margin-top:var(--s16,16px)}
.suya{display:flex;align-items:center;gap:var(--s16,16px);width:100%;
text-align:left;background:var(--canvas);border-radius:22px;
padding:var(--s8) var(--s16,16px) var(--s8) var(--s8);transition:.15s}
.suya:hover{background:var(--hairline);transform:translateX(2px)}
.suya img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:14px;
flex:none;background:var(--hairline)}
.suya-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.suya-txt b{font-family:var(--display);font-weight:700;font-size:15px;
letter-spacing:-.018em;line-height:1.25;color:var(--ink);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
.suya-txt .fog{font-size:12px;font-weight:600}
.suya .nota-mini{width:44px;height:44px;min-width:44px;font-size:20px}
/* Elegir la foto */
.foto-fila{display:flex;align-items:center;gap:var(--s20);flex-wrap:wrap}
.foto-fila .avatar{width:88px;height:88px;font-size:34px}
.foto-btns{display:flex;flex-wrap:wrap;gap:var(--s8);align-items:center;
max-width:340px}
.foto-btns label.btn{cursor:pointer}
.foto-btns .ayuda{flex-basis:100%;margin-top:0}
@media (max-width: 720px){
.suya img{width:72px}
.perfil-cab .avatar{width:56px!important;height:56px!important;font-size:22px!important}
}
/* ═══════════ MURO AGRUPADO POR VIDEO ═══════════ */
.celda-th{width:100%;padding:0;display:block;position:relative}
.celda-ti{text-align:left;padding:0;display:block;width:100%}
.cuantas-pip{position:absolute;right:var(--s12);bottom:var(--s12);
background:rgba(10,9,14,.82);color:#fff;border-radius:var(--r-btn);
padding:4px 11px;font-size:11px;font-weight:700;backdrop-filter:blur(6px)}
/* :last-of-type se equivocaba de elemento: caraDe() devuelve a veces ![]()
y a veces , y .firmas-tx TAMBIEN es un , asi que "el ultimo
span" resultaba ser el texto, no el avatar -- y el avatar se quedaba con
el margen negativo, montado encima del nombre. El combinador de hermano
adyacente no le importa la etiqueta: solo pega avatar-con-avatar. */
.firmas{display:flex;align-items:center;min-width:0;max-width:62%}
.firmas .avatar{width:22px;height:22px;font-size:10px;flex:none;
box-shadow:0 0 0 2px var(--white)}
.firmas .avatar + .avatar{margin-left:-8px}
.firmas-tx{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--slate);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pip-min{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;
font-weight:600;color:var(--mist);padding:4px 6px;white-space:nowrap;
border-radius:10px;transition:.15s}
.pip-min:hover{color:var(--ink);background:var(--canvas)}
.pip-min[data-mia]{color:var(--azul)}
.guardar{display:inline-flex;align-items:center;padding:5px 7px;border-radius:12px;
color:var(--mist);transition:.15s}
.guardar:hover{color:var(--ink);background:var(--canvas)}
.guardar.puesto{color:var(--azul)}
/* Buscador pequeño de la fila de filtros */
.buscador.chico{max-width:200px;margin:0}
.buscador.chico input{padding:12px var(--s16,16px) 12px 44px;font-size:14px;
border-radius:var(--r-btn)}
.buscador.chico .lupa{left:17px;margin-top:-8px}
#ver-guardados .btn-cat .n{font-size:11px;font-weight:700;opacity:.6}
/* ═══════════ FICHA DE UN VIDEO ═══════════ */
.opiniones{display:flex;flex-direction:column;gap:var(--s16,16px);
margin-top:var(--s16,16px)}
.opinion{background:var(--canvas);border-radius:26px;padding:var(--s20);
border:2px solid transparent;transition:.2s}
.opinion.resaltada{border-color:var(--azul);background:var(--white);
box-shadow:var(--sh-float)}
.op-cab{display:flex;align-items:center;justify-content:space-between;
gap:var(--s12);margin-bottom:var(--s12)}
.op-cab .autor{display:flex;align-items:center;gap:var(--s8);min-width:0;
padding:0;border-radius:var(--r-btn)}
.op-quien{display:flex;flex-direction:column;text-align:left;min-width:0}
.op-quien b{font-family:var(--display);font-weight:700;font-size:14.5px;
letter-spacing:-.015em;color:var(--ink)}
.op-quien .fog{font-size:11.5px}
.op-cab .nota-mini{width:40px;height:40px;min-width:40px;font-size:19px}
.opinion .resena-tx{font-size:15px;line-height:1.55;color:var(--slate);
white-space:pre-wrap;overflow-wrap:anywhere}
.op-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8);
margin-top:var(--s12)}
.op-acciones .estrella{padding:6px 12px;font-size:13px}
.op-link{font-size:12.5px;font-weight:600;color:var(--mist);padding:6px 8px;
border-radius:10px;transition:.15s}
.op-link:hover{color:var(--ink);background:var(--white)}
.op-link.peligro:hover{color:#d1495b}
.opinion .comentarios{margin-top:var(--s16,16px);padding-top:var(--s8);
border-top:1px solid var(--hairline)}
.form-com{display:flex;gap:var(--s8);align-items:flex-end;margin-top:var(--s12)}
.form-com textarea{flex:1;min-height:44px;background:var(--white);
border:2px solid transparent;border-radius:20px;padding:11px var(--s16,16px);
font:inherit;font-size:14px;color:var(--ink);resize:vertical}
.form-com textarea:focus{outline:none;border-color:var(--azul)}
@media (max-width: 720px){
.buscador.chico{max-width:none;width:100%}
.firmas{max-width:100%}
.op-acciones{gap:2px}
}
/* ═══════════ PÁGINAS LEGALES ═══════════ */
.legal{max-width:68ch;padding:var(--s40) 0 var(--s80)}
.legal .lede{margin-top:var(--s20)}
.legal .fecha{font-size:13px;color:var(--mist);margin-top:var(--s12);font-weight:600}
.legal h2{font-family:var(--display);font-weight:700;font-size:21px;
letter-spacing:-.02em;color:var(--ink);margin:var(--s40) 0 var(--s12)}
.legal p{font-size:16px;line-height:1.65;color:var(--slate);margin-bottom:var(--s12)}
.legal b{color:var(--ink);font-weight:600}
.legal ul{margin:0 0 var(--s12);padding-left:var(--s20)}
.legal li{font-size:16px;line-height:1.65;color:var(--slate);margin-bottom:6px}
.legal a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.legal code{background:var(--white);padding:2px 7px;border-radius:8px;font-size:14px}
.topnav a.brand{text-decoration:none}
footer a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--ink)}
/* ═══════════ ALIAS ═══════════ */
/* `.field span` pone todos los span en bloque, y esto es un span dentro de
un .field: hay que ganarle en especificidad o la @ se cae de fila. */
.field .campo-alias{display:flex;align-items:center;background:var(--canvas);
border:2px solid transparent;border-radius:var(--r-input);
padding-left:var(--s16,16px);transition:.15s;max-width:560px}
.field .campo-alias:focus-within{border-color:var(--azul);background:var(--white)}
.field .campo-alias .arroba{display:inline;flex:none;margin:0;
font-size:16px;font-weight:600;color:var(--mist);letter-spacing:0;
text-transform:none}
/* El width:100% general de .field input rompia la fila y tiraba la @ abajo */
.field .campo-alias input{background:none!important;border:0!important;flex:1 1 auto;
width:auto!important;min-width:0;padding-left:4px}
.field .campo-alias input:focus{outline:none}
.alias-tx{display:block;font-size:14px;font-weight:600;color:var(--mist);
margin-top:2px}
.alias-tx.chico{display:inline;font-size:12px;margin:0 0 0 2px;font-weight:600}
.quien-col{display:flex;flex-direction:column;min-width:0}
.ayuda.bien{color:#0a8f5b;font-weight:600}
.ayuda.mal{color:#d1495b;font-weight:600}