@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:20px; --r-btn:25px; --r-badge:20px; --r-input:13px;
--r-nav:10px; --r-tile:14px;
/* ── 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)}
/* El punto azul era un marcador de posición hasta tener el logo. */
.topnav .brand .marca{width:22px;height:22px;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:7px;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:14px;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:16px;
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:12px;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:16px;
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:14px;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:10px;
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:14px;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:10px;
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:12px;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:8px;
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:12px;padding:var(--s12);margin-bottom:var(--s20)}
.vista-previa img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;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:12px;padding:var(--s12) var(--s20)}
.lista-suyas a:hover{background:var(--hairline)}
.nota-mini{min-width:48px;height:48px;border-radius:7px;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:5px;
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:14px;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:10px;
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 ═══════════ */
/* Las 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:13px;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:9px;
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:14px;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:5px;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:7px;
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:11px;
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:7px;
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}
/* Un repost solo se presenta en el perfil: el comentario propio va arriba y
la recomendación original queda contenida dentro de la misma tarjeta. */
.reposts-perfil{display:flex;flex-direction:column;gap:var(--s12);
margin-top:var(--s16,16px)}
.perfil-repost{background:var(--canvas);border:1px solid var(--hairline);
border-radius:var(--r-card);padding:var(--s12);transition:.2s}
.perfil-repost.resaltado{background:var(--white);border-color:var(--azul);
box-shadow:var(--sh-float)}
.perfil-repost-cab{display:flex;align-items:center;justify-content:space-between;
gap:var(--s8);padding:0 var(--s4) var(--s8);flex-wrap:wrap}
.perfil-repost-etiqueta{font-size:12px;font-weight:700;color:var(--azul)}
.perfil-repost-comentario{margin:0 var(--s4) var(--s12);
border-left:3px solid var(--lavender);padding:var(--s8) var(--s12);
font-family:var(--display);font-size:16px;font-weight:600;line-height:1.45;
color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.perfil-repost-sin-comentario{margin:0 var(--s4) var(--s12);font-size:13px;
color:var(--mist)}
.perfil-repost .repost-original{background:var(--white);
border:1px solid var(--hairline)}
.perfil-repost .repost-original:hover{background:var(--white);
border-color:var(--lavender)}
.repost-autor-original{font-size:12px;font-weight:700;color:var(--azul)}
/* 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:5px;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:6px;
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:13px;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:5px;transition:.15s}
.op-link:hover{color:var(--ink);background:var(--white)}
.op-link.peligro:hover{color:#d1495b}
.op-link.contador-repost{display:inline-flex;align-items:center;cursor:default}
.op-link.contador-repost:hover{color:var(--mist);background:none}
.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:10px;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:4px;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}
/* ═══════════════════════════════════════════════════════════════════════
LOS CAMBIOS DE ESTA VUELTA
Va al final a propósito: lo de arriba sigue siendo el sistema original y
aquí solo están los sitios donde esta versión se separa de él.
═══════════════════════════════════════════════════════════════════════ */
/* ── La marca vuelve al inicio ── */
.topnav .brand{padding:0;background:none;border:0;cursor:pointer;
transition:opacity .15s}
.topnav .brand:hover{opacity:.75}
.topnav .brand .marca{transition:transform .2s}
.topnav .brand:hover .marca{transform:scale(1.12) rotate(-4deg)}
/* ── El pie, pegado abajo ──
Privacidad y Condiciones son las dos páginas que Google exige poder
encontrar. Antes había que bajar hasta el final del muro; ahora están
siempre ahí, en una banda fina que no le quita sitio a nada. */
body{padding-bottom:58px}
footer.pie-fijo{
position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;
display:flex;align-items:center;gap:var(--s20);
padding:11px var(--s24);font-size:13px;color:var(--mist);
background:color-mix(in srgb, var(--canvas) 88%, transparent);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-top:1px solid var(--hairline);
}
footer.pie-fijo .pie-marca{font-family:var(--display);font-weight:700;
color:var(--slate);margin-right:auto}
footer.pie-fijo a{color:var(--slate);text-decoration:none;font-weight:600}
footer.pie-fijo a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:520px){
footer.pie-fijo{gap:var(--s12);padding:10px var(--s16,16px);font-size:12px}
}
/* ── Todo en una fila en el inicio ──
El botón de recomendar iba en su propio renglón y partía la página en dos
antes de que se viera un solo video. */
.filtros{display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap;
justify-content:flex-start}
.filtros .controles{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.filtros #filtro-activo:empty{display:none}
.lede.una-linea{max-width:none;font-size:16px}
/* ── Recomendar, en dos columnas ──
A la izquierda de dónde sale el video —link, título, canal, categoría— y a
la derecha lo que pones tú. Antes era una columna larguísima y la nota y la
reseña quedaban debajo del pliegue. */
.form-pub{max-width:1060px}
.pub-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s40)}
.pub-col{display:flex;flex-direction:column;min-width:0}
.pub-col .field{max-width:none}
.pub-col .field.crece{flex:1;display:flex;flex-direction:column}
.pub-col .field.crece textarea{flex:1;min-height:190px}
@media (max-width:900px){
.pub-cols{grid-template-columns:1fr;gap:var(--s24)}
.pub-col .field.crece textarea{min-height:130px}
}
/* El título y el canal ya no son campos: son lo que YouTube dice que son.
Pero se siguen viendo, y la miniatura grande: es lo que te confirma de un
vistazo que pegaste el link del video que querías y no el de al lado. */
.pub-col .vista-previa{flex-direction:column;align-items:stretch;
gap:var(--s12);padding:var(--s12);margin-bottom:var(--s20)}
.pub-col .vista-previa img{width:100%;height:auto;aspect-ratio:16/9;
border-radius:10px}
.pub-col .vista-previa > div{padding:0 var(--s4) var(--s4)}
.pub-col .vista-previa b{font-size:17px;line-height:1.25}
.pub-col .vista-previa > div > span{font-size:14px}
.vista-previa .fijo{display:block;margin-top:var(--s8);font-size:12px;
font-weight:600;color:var(--mist)}
.vista-previa .fijo::before{content:'🔒 ';opacity:.6}
.vista-previa.fija{margin-top:0}
/* ── La nota ──
La barra llega hasta el borde derecho y el número va encima, en blanco con
su sombra. Ya no se pinta del color de la nota: un 4 en rojo de alarma al
lado de algo que estás recomendando manda el mensaje contrario. */
.form-pub .slider-fila{display:block}
.form-pub .slider-fila input[type=range]{width:100%;min-width:0;display:block;
height:26px;margin:0;accent-color:var(--acc)}
.form-pub .nota-viva{
display:inline-block;background:var(--acc);color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.38);box-shadow:var(--sh-float);
min-width:96px;margin-bottom:var(--s12);
}
.form-pub .escala{margin-top:var(--s8)}
/* ── La reseña, con cara de reseña ──
Antes empezaba por la cara y el nombre y el texto iba debajo en gris: se
leía como una respuesta en un foro. Ahora manda el texto. */
.op-tope{display:flex;align-items:flex-start;gap:var(--s12);
margin-bottom:var(--s12)}
.op-tit{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.op-titulo{font-family:var(--display);font-weight:750;font-size:18px;
line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.op-kicker{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap;
font-size:12px;font-weight:600;color:var(--mist)}
.badge.chico{padding:3px 10px;font-size:11px}
.nota-mini.grande{min-width:54px;height:54px;font-size:23px;border-radius:9px;
flex:none}
.op-cuerpo{
margin:0;font-family:var(--display);font-weight:600;font-size:19px;
line-height:1.45;letter-spacing:-.012em;color:var(--ink);
border-left:4px solid var(--lavender);padding-left:var(--s16,16px);
white-space:pre-wrap;overflow-wrap:anywhere;
}
.op-firma{display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap;
margin-top:var(--s12)}
.op-firma .autor{display:flex;align-items:center;gap:var(--s8);min-width:0;
border-radius:var(--r-btn);padding:5px 12px 5px 5px}
.op-firma .autor:hover{background:var(--white)}
.opinion .op-acciones{margin-top:var(--s12)}
.op-link.hecho{color:var(--azul)}
/* ── Vista previa al escribir un repost ── */
.repost-vista{display:flex;gap:var(--s12);align-items:center;
background:var(--canvas);border-radius:11px;padding:var(--s12);
margin-top:var(--s16,16px)}
.repost-vista img{width:132px;aspect-ratio:16/9;object-fit:cover;
border-radius:7px;flex:none}
.repost-vista b{display:block;font-family:var(--display);font-weight:700;
font-size:15px;line-height:1.25}
.repost-vista .fog{display:block;font-size:12.5px;margin-top:4px}
/* ── Editar tu comentario, ahí mismo ── */
.editando{display:flex;flex-direction:column;gap:var(--s8);margin-top:6px}
.editando textarea{width:100%;min-height:76px;background:var(--white);
border:2px solid var(--azul);border-radius:9px;padding:12px var(--s16,16px);
font:inherit;font-size:14px;color:var(--ink);resize:vertical}
.editando textarea:focus{outline:none}
.editando .rowbtns{display:flex;gap:var(--s8)}
.btn.sm{padding:8px 18px;font-size:14px}
/* ── La super estrella ──
Todo el componente usa azul, incluido el texto, y conserva contraste en
claro y oscuro. */
.super-svg{display:block;flex:none;color:#2f83ff;filter:drop-shadow(0 0 5px rgba(47,131,255,.35))}
.btn-super{
display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-btn);
padding:7px 15px 7px 11px;font-size:13px;font-weight:700;color:#1668ff;
background:color-mix(in srgb,#2f83ff 10%,var(--white));
border:1px solid color-mix(in srgb,#2f83ff 24%,transparent);
transition:.16s;flex:none;text-shadow:0 0 9px rgba(47,131,255,.22);
}
.btn-super:hover{color:#0758d8;transform:translateY(-1px);
box-shadow:var(--sh-subtle)}
.btn-super.puesta{
color:#0758d8;
background:linear-gradient(105deg,#e8f3ff,#cfe5ff,#a8d1ff);
border-color:#72b1ff;
box-shadow:0 3px 18px rgba(47,131,255,.28);
}
:root[data-theme="dark"] .btn-super{background:rgba(22,104,255,.12);color:#8ec1ff;
border-color:rgba(114,177,255,.28)}
:root[data-theme="dark"] .btn-super.puesta{color:#c8e2ff;
background:linear-gradient(105deg,rgba(22,104,255,.2),rgba(0,178,255,.14));
border-color:#438eff;box-shadow:0 3px 20px rgba(0,126,255,.34)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .btn-super{background:rgba(22,104,255,.12);
color:#8ec1ff;border-color:rgba(114,177,255,.28)}
:root:not([data-theme="light"]) .btn-super.puesta{color:#c8e2ff;
background:linear-gradient(105deg,rgba(22,104,255,.2),rgba(0,178,255,.14));
border-color:#438eff;box-shadow:0 3px 20px rgba(0,126,255,.34)}
}
.btn-super .n{font-variant-numeric:tabular-nums;opacity:.7;font-size:12px}
.super-cuenta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
font-weight:700;color:var(--slate);margin-top:6px}
.tab-super{display:inline-flex;align-items:center;gap:6px}
.tab-super .super-mini{
color:#2f83ff;filter:drop-shadow(0 0 5px rgba(47,131,255,.45));
font-size:15px;line-height:1}
/* ── El perfil, en dos columnas ──
La foto y la descripción a la izquierda; a la derecha, todo lo que ha
recomendado en horizontal. En una sola columna la cabecera empujaba las
reseñas fuera de la pantalla y había que hacer scroll para ver la primera. */
.perfil-2col{display:grid;grid-template-columns:236px 1fr;gap:var(--s32);
align-items:start}
.perfil-lado{display:flex;flex-direction:column;align-items:flex-start;
gap:2px;position:sticky;top:0}
.perfil-lado .avatar{width:112px;height:112px;font-size:44px;
margin-bottom:var(--s12)}
.perfil-nombre{font-family:var(--display);font-weight:750;font-size:22px;
line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.perfil-lado .alias-tx{margin-top:2px}
.perfil-lado .perfil-bio{margin-top:var(--s12);font-size:14px;line-height:1.5;
color:var(--slate);overflow-wrap:anywhere}
.perfil-datos{display:flex;flex-wrap:wrap;gap:var(--s16,16px);
margin-top:var(--s16,16px)}
.perfil-datos .dato{display:flex;flex-direction:column;line-height:1.1}
.perfil-datos .dato b{font-family:var(--display);font-weight:750;font-size:20px;
font-variant-numeric:tabular-nums}
.perfil-datos .dato span{font-size:11.5px;font-weight:600;color:var(--mist);
margin-top:3px}
.perfil-btns{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s20)}
.perfil-obra{min-width:0}
.titulillo{font-size:19px;margin-bottom:var(--s8)}
.suya-resena{font-size:13px;color:var(--slate);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
.hoja:has(.perfil-2col){max-width:940px}
@media (max-width:760px){
.perfil-2col{grid-template-columns:1fr;gap:var(--s24)}
.perfil-lado{position:static}
}
/* ── La lista de gente y el ranking ──
La tarjeta ya no es un botón: dentro hay otros botones (super estrella y
compartir), y un botón dentro de otro no es HTML válido. */
.perfil-card{position:relative;padding-bottom:var(--s12)}
.perfil-card:hover{transform:none;box-shadow:var(--sh-subtle)}
.perfil-ir{display:flex;flex-direction:column;gap:var(--s12);width:100%;
text-align:left;padding:0;transition:.15s}
.perfil-ir:hover b{color:var(--azul)}
.perfil-card-pie{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap;
margin-top:var(--s12);padding-top:var(--s12);
border-top:1px solid var(--hairline)}
.perfil-card-pie .op-link{margin-left:auto}
.perfil-card .puesto{
position:absolute;top:var(--s12);right:var(--s16,16px);
font-family:var(--display);font-weight:800;font-size:26px;
color:var(--hairline);line-height:1}
.perfil-card.podio .puesto{
background:linear-gradient(120deg,#b9d9ff,#2f83ff,#00b2ff);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* ── La estrellita desde la propia tarjeta del muro ── */
.celda .estrella.min{padding:5px 11px;font-size:12.5px;gap:5px;
color:var(--mist);opacity:.85}
.celda .estrella.min:hover{color:var(--ink);opacity:1}
.celda .estrella.min[aria-pressed="true"]{background:var(--volt);
color:var(--plum);opacity:1}
/* ── Mis estrellas ──
La página cambia de color aquí. Es a propósito: se nota nada más entrar
que estás en tu rincón y no en la plaza. */
.caras-supers{display:flex;flex-wrap:wrap;gap:var(--s8);min-width:0}
.cara-super{display:inline-flex;align-items:center;gap:var(--s8);
background:var(--white);border-radius:var(--r-btn);padding:5px 15px 5px 5px;
font-size:13px;font-weight:600;color:var(--slate);box-shadow:var(--sh-subtle);
transition:.15s;max-width:190px}
.cara-super:hover{color:var(--ink);transform:translateY(-1px);
box-shadow:var(--sh-float)}
.cara-super span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Con el pie fijo, la hoja modal necesita su propio hueco abajo. */
.telon{padding-bottom:var(--s80)}
/* ── En móvil ──
Las pestañas ya no caben en la misma línea que la marca y el avatar:
se salían por la derecha y la página entera se podía desplazar en
horizontal. Van a su propio renglón, y ahí se deslizan si hacen falta. */
@media (max-width:760px){
.topnav{flex-wrap:wrap;row-gap:var(--s12)}
.nav-der{width:100%;margin-left:0;flex-wrap:wrap;
justify-content:flex-end;gap:var(--s8)}
.tabs{order:3;width:100%;overflow-x:auto;justify-content:flex-start;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;white-space:nowrap;padding:8px 13px;font-size:13px}
.filtros{gap:var(--s8)}
.filtros .controles{margin-left:0;width:100%;gap:var(--s8)}
.buscador.chico{max-width:none;flex:1;min-width:140px}
.cadencia{flex:1}
.cadencia button{padding:9px 14px;font-size:13px}
.hoja{padding:var(--s24) var(--s20)}
.op-cuerpo{font-size:17px}
}
/* ── Los iconos de dentro de un botón no se encogen ──
El botón es un flex, y un