/* ============================================================================
   VELDITAS RENOVADO — nuevo diseño de index.html (1-oct-2026)
   Basado en "Velditas Renovado": menú lateral oscuro compacto, barra superior,
   tarjetas por tono (sin líneas), acento rojo templario, dorado suave.

   SOLO apariencia + una barra superior que reutiliza los controles que ya
   existen (buscador, campana, perfil). No cambia el HTML original, los ids ni
   la lógica del sitio. Para volver al diseño anterior basta quitar de index.html
   las líneas que cargan css/index-renovado.css y js/index-renovado.js.

   COLORES: salen de ADMIPRO ("Diseño Sagrado"). Este archivo solo trae valores por defecto.
   Las superficies (tarjetas) se calculan desde el fondo y el texto activos, por eso un tema
   de perfil (que solo cambia colores) o cualquier paleta conserva EXACTAMENTE la misma estructura.
   La tipografía del diseño es fija en el index. Los anuncios con estilo propio (.ann-style-*) no se tocan.
   */

:root{
  /* Valores por defecto del diseño. Si ADMIPRO ("Diseño Sagrado") guarda colores, esos MANDAN. */
  --bg:#0E1014; --bg1:#161921; --bg2:#1F232D; --bg3:#2A2F3B; --bg4:#343A48;
  --border:#1F232D;
  --text:#ECEEF3; --text2:#B0B5C3; --muted:#7E8496;
  --green:#E5594F;
  --btn-bg:#DC4A40; --btn-text:#FFFFFF;
  --gold:#E6C57F;
  --r:10px;
  --title-color:#ECEEF3; --subtitle-color:#B0B5C3;
  /* Tipografía propia del diseño (fija en el index) */
  --font-primary:'Hanken Grotesk' !important;
  --font-title:'Bricolage Grotesque' !important;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --vr-top:54px;
  --vr-ts:1; --vr-bs:1;   /* escala de textos y de botones (ADMIPRO: Pequeño / Normal / Grande) */
  /* Derivados: todo sale de la paleta activa, así cualquier paleta o tema conserva la MISMA estructura */
  --rail:color-mix(in srgb,var(--bg) 70%,#000);
  --rail-on:var(--text);
  --rail-ink:color-mix(in srgb,var(--text) 65%,var(--rail));
  --cross-soft:color-mix(in srgb,var(--green) 18%,var(--bg));
}

/* Mientras ADMIPRO no haya guardado colores NUEVOS (bandera "renovado" en admin_design_settings), el index usa la
   paleta del diseño aunque haya colores antiguos guardados. Al guardar colores en "Diseño Sagrado", la bandera se
   activa y desde ese momento mandan los colores de ADMIPRO. (El atributo lo pone un script mínimo en index.html.) */
html[data-vr-lock]{
  --bg:#0E1014 !important; --bg1:#161921 !important; --bg2:#1F232D !important; --bg3:#2A2F3B !important; --bg4:#343A48 !important;
  --border:#1F232D !important;
  --text:#ECEEF3 !important; --text2:#B0B5C3 !important; --muted:#7E8496 !important;
  --green:#E5594F !important; --btn-bg:#DC4A40 !important; --btn-text:#FFFFFF !important;
  --gold:#E6C57F !important; --r:10px !important;
  --title-color:#ECEEF3 !important; --subtitle-color:#B0B5C3 !important;
}

/* Superficies (tarjetas) calculadas desde el fondo y el texto ACTIVOS. Se recalculan dentro del perfil
   (#normalFeedContainer) para que un tema comprado, que iguala fondo y tarjetas, no aplane el diseño. */
:root,#normalFeedContainer{
  --vr-s1:color-mix(in srgb,var(--bg) 96%,var(--text));
  --vr-s2:color-mix(in srgb,var(--bg) 92%,var(--text));
  --vr-s3:color-mix(in srgb,var(--bg) 86%,var(--text));
}

html,body{background:var(--bg)}
body{font-size:calc(13px*var(--vr-ts));line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--vr-s3);border:0;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--bg4)}
*{scrollbar-color:var(--vr-s3) transparent}
button:focus-visible,a:focus-visible,.nav-item:focus-visible,.interact-btn:focus-visible,.tool-tag:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ═════════ ESQUELETO: menú | (barra superior + muro) | columna derecha ═════════ */
.layout{grid-template-rows:auto 1fr;max-width:none}
.sidebar{grid-column:1;grid-row:1 / 3}
#vrTop{grid-column:2 / -1;grid-row:1}
.main{grid-column:2;grid-row:2}
.right{grid-column:3;grid-row:2}
@media(min-width:1101px){.layout{grid-template-columns:208px minmax(0,1fr) 300px}}
@media(min-width:769px) and (max-width:1100px){.layout{grid-template-columns:208px minmax(0,1fr)}}

/* ═════════ MENÚ LATERAL ═════════ */
.sidebar{background:var(--rail);border-right:0;padding:14px 10px 10px;gap:2px}
.logo{border-bottom:0;padding:0 8px 12px}
.logo-img-full{max-height:34px}
.logo-text{font-size:calc(16px*var(--vr-ts));letter-spacing:.14em}
.logo-sub{font-size:calc(7px*var(--vr-ts));letter-spacing:.12em;color:var(--rail-ink)}
.nav{padding:0;flex:1}
.nav-item{padding:7px 11px;margin:0 0 1px;gap:10px;border:0;border-radius:9px;font-size:calc(12.5px*var(--vr-ts));font-weight:500;color:var(--rail-ink);
  transition:background .18s,color .18s}
.nav-item i{width:16px;font-size:calc(13px*var(--vr-ts));opacity:.9}
.nav-item:hover{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--rail-on);border:0}
.nav-item.active{background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--rail-on);font-weight:600;border:0}
.nav-item.active i{color:inherit}
.nav-item[style*="border"]{border-radius:9px !important}

.user-card{margin:8px 0 0;padding:9px 10px;background:color-mix(in srgb,var(--text) 6%,transparent);border:0;border-radius:12px;gap:8px;overflow:hidden}
.user-card:hover{background:color-mix(in srgb,var(--text) 10%,transparent)}
.user-card img{width:32px;height:32px;border:0}
.uc-name{font-size:calc(12.5px*var(--vr-ts));color:var(--rail-on);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-name i{color:var(--gold)}
.uc-role{font-size:calc(10px*var(--vr-ts));letter-spacing:.06em;color:var(--rail-ink)}
.uc-dv{font:600 calc(9px*var(--vr-ts))/1.4 var(--f-mono);letter-spacing:-.03em;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stats-bar{margin:6px 0 0;padding:8px 0;background:color-mix(in srgb,var(--text) 4%,transparent);border:0;border-radius:12px}
.stat-num{font-size:calc(15px*var(--vr-ts));color:var(--rail-on)}
.stat-label{font-size:calc(8.5px*var(--vr-ts));letter-spacing:.06em;color:var(--rail-ink)}
.sb-xp-wrap{padding:8px 4px 0}
.sb-xp-bar{height:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.sb-xp-fill{background:var(--gold);border-radius:2px}
.sb-xp-label{font-size:calc(9px*var(--vr-ts));color:var(--rail-ink)}
.auth-actions{padding:8px 0 4px}
.btn-auth{padding:8px 12px;border-radius:999px;font-size:calc(11.5px*var(--vr-ts))}
.btn-login{background:var(--btn-bg);color:var(--btn-text)}
.btn-logout{background:none;color:var(--rail-ink);border:0 !important;justify-content:flex-start;font-weight:500;padding:4px 2px}
.btn-logout:hover{background:none;color:var(--rail-on)}

/* Nada del menú se encoge: si hay más botones que alto de pantalla, el menú se desplaza (antes la tarjeta de usuario se aplastaba) */
.sidebar > *{flex-shrink:0}
.nav{flex:1 0 auto}
.user-card{min-height:52px}

/* La campana de la barra superior reemplaza este botón (la campana lo dispara por código, por eso solo se oculta) */
.nav-item[onclick*="openNotifications"]{display:none}

/* ═════════ BARRA SUPERIOR (creada por js/index-renovado.js con los controles existentes) ═════════ */
#vrTop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;min-height:var(--vr-top);
  padding:9px clamp(14px,2vw,26px);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
#vrTop h2{margin:0 6px 0 0;flex:none;font:700 calc(16px*var(--vr-ts)) var(--font-title),sans-serif;letter-spacing:-.01em;color:var(--text)}
#vrSearchSlot{flex:1 1 0;min-width:0;max-width:480px;margin-left:auto}
#vrSearchSlot > div{position:relative}
#vrSearchSlot > div > div:first-child{margin-bottom:0 !important;gap:10px !important}
#vrSearchSlot .search{margin:0 !important}
#vrSearchSlot .search input{padding:8px 14px 8px 36px;background:var(--vr-s1);border:0;border-radius:999px;font-size:calc(12.5px*var(--vr-ts));color:var(--text)}
#vrSearchSlot .search input:focus{background:var(--vr-s2);box-shadow:0 0 0 2px var(--vr-s3)}
#vrSearchSlot .search i{left:15px;font-size:calc(13px*var(--vr-ts));color:var(--muted)}
#soundToggleBtn{width:32px !important;height:32px !important;border-radius:50% !important;background:var(--vr-s1) !important;border:0 !important;color:var(--text2) !important}
#soundToggleBtn:hover{background:var(--vr-s3) !important}
.vr-ic{position:relative;width:32px;height:32px;border-radius:50%;background:var(--vr-s1);color:var(--text);display:grid;place-items:center;flex:none;border:0;cursor:pointer;font-size:calc(13px*var(--vr-ts));transition:background .18s,transform .18s}
.vr-ic:hover{background:var(--vr-s3)}
.vr-ic:active{transform:scale(.96)}
.vr-tag{position:absolute;top:-4px;right:-4px;min-width:18px;padding:1px 5px;border-radius:999px;background:var(--btn-bg);color:#fff;font:600 calc(10px*var(--vr-ts)) var(--f-mono);text-align:center}
.vr-av{width:32px;height:32px;border-radius:50%;padding:0;overflow:hidden;flex:none;border:0;cursor:pointer;background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 50%,#000))}
.vr-av img{width:100%;height:100%;object-fit:cover;display:block}

/* ═════════ ÁREA CENTRAL ═════════ */
.main{border-right:0;background:var(--bg)}
#normalFeedContainer{padding:0 clamp(12px,1.6vw,18px) 14px;background:var(--bg)}
.banner{border-radius:var(--r);margin-top:2px}
.banner::after{border-radius:var(--r)}
.profile-head{margin-top:-52px}
.p-name{font-size:calc(20px*var(--vr-ts));color:#fff}
.p-meta{font-size:calc(12px*var(--vr-ts))}
.bio{font-size:calc(13px*var(--vr-ts));color:var(--text2)}
.section{border-bottom:0;padding:12px 4px}
.sec-title{font:600 calc(10.5px*var(--vr-ts)) var(--f-mono);letter-spacing:.08em;color:var(--muted)}
.progress-wrap{background:var(--vr-s1);border:0;border-radius:var(--r);padding:12px 14px;margin:10px 0 0}
.progress-top{font:500 calc(10.5px*var(--vr-ts)) var(--f-mono);letter-spacing:.06em;color:var(--muted)}
.progress-bar{height:7px;border-radius:4px;background:var(--vr-s2)}
.progress-fill{background:var(--green);border-radius:4px}

/* Botones del perfil */
.btn-sm{height:28px;padding:5px 12px;border-radius:999px;font-size:calc(11px*var(--vr-ts));letter-spacing:.02em;text-transform:none;font-weight:600}
.btn-green{background:var(--btn-bg);color:var(--btn-text)}
.btn-outline{background:var(--vr-s2);color:var(--text);border:0 !important}
.btn-outline:hover{background:var(--vr-s3);border:0 !important}
.btn-gold{background:color-mix(in srgb,var(--gold) 12%,transparent);border:0 !important;color:var(--gold)}

/* Perfil: cuadros de progreso y estadísticas (los crea js/index-renovado.js con lo que el perfil ya muestra) */
#profileHeader .progress-wrap,#profileHeader #phFollowers{display:none}
.role-tag{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);border-radius:999px;padding:2px 10px;font-weight:700}
.p-meta .dv,#lblDinares{color:var(--gold);font-weight:700}
#normalFeedContainer:has(> #profileHeader:not([style*="none"])) .banner{border-radius:var(--r)}
#vrPerfilStats{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px;margin:12px 0 10px}
.vr-pf-evo{display:flex;gap:16px;align-items:center;background:var(--vr-s1);border-radius:var(--r);padding:14px 16px;min-width:0}
.vr-ring.big{width:90px;height:90px}
.vr-ring.big .c b{font-size:calc(17px*var(--vr-ts))}
.vr-pf-txt{min-width:0}
.vr-lbl{font:500 calc(10.5px*var(--vr-ts)) var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vr-pf-big{font:700 calc(14.5px*var(--vr-ts))/1.25 var(--font-title),sans-serif;color:var(--text);margin:4px 0 6px}
.vr-pf-txt .vr-btn.sm{width:auto;display:inline-flex;margin-top:8px;padding:5px 12px;font-size:calc(11.5px*var(--vr-ts))}
.vr-pf-txt .vr-btn[hidden]{display:none}
.vr-pf-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vr-stat{display:flex;flex-direction:column;justify-content:center;gap:6px;background:var(--vr-s1);border-radius:var(--r);padding:12px 16px;min-width:0}
.vr-stat b{font:700 calc(19px*var(--vr-ts))/1 var(--font-title),sans-serif;color:var(--text)}
.profile-tab-panel.active{background:var(--vr-s1);border-radius:var(--r);padding:14px}
@media(max-width:700px){
  #vrPerfilStats{grid-template-columns:minmax(0,1fr)}
  .vr-pf-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vr-stat{padding:10px 6px;align-items:center;text-align:center}
  .vr-stat b{font-size:calc(17px*var(--vr-ts))}
  .vr-stat .vr-lbl{font-size:calc(9px*var(--vr-ts))}
}

/* Pestañas del perfil: píldoras */
.profile-tabs{background:var(--vr-s2);border:0;border-radius:999px;padding:3px;gap:2px;width:max-content;max-width:100%;margin-bottom:12px}
.profile-tab-btn{border:0;border-radius:999px;padding:6px 12px;font-size:calc(12px*var(--vr-ts));font-weight:600;color:var(--text2)}
.profile-tab-btn:hover{color:var(--text)}
.profile-tab-btn.active{background:var(--vr-s1);color:var(--text);border:0}

/* Historias */
.stories-container{gap:12px;padding:6px 2px 10px;border-bottom:0}
.story-item{min-width:58px}
.story-avatar{width:52px;height:52px;padding:3px;border:0;background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 50%,#000))}
.story-avatar img{border:2px solid var(--bg)}
.story-item:hover .story-avatar{border-color:transparent;transform:scale(1.06)}
.story-item .story-avatar{transition:transform .18s}
.story-item.create-story .story-avatar{background:var(--vr-s1);border:0;font-size:calc(20px*var(--vr-ts));color:var(--text2)}
.story-item span{font-size:calc(11px*var(--vr-ts));color:var(--text2);max-width:60px}

/* Publicar (composer): texto, "publicar como" y herramientas */
.composer{background:var(--vr-s1);border:0;border-radius:var(--r);padding:0;margin:0 0 8px;overflow:hidden}
.comp-top{padding:12px 12px 2px}
.comp-avatar{width:34px;height:34px}
.comp-input{font-size:calc(13.5px*var(--vr-ts));min-height:36px;padding-top:6px}
#identitySwitcher{width:auto;max-width:calc(100% - 24px);margin:2px 12px 8px;background:var(--vr-s2);color:var(--text);border:0;border-radius:999px;padding:5px 12px;font-size:calc(11.5px*var(--vr-ts))}
#postPreview,#postImgPreviewContainer{margin:0 12px 8px}
.comp-bottom{margin:0;padding:9px 12px;background:var(--vr-s2);border-top:0}
#promoContainer{margin:0;border-radius:0}
.tool-tag{background:var(--vr-s1);border:0;border-radius:999px;padding:5px 11px;font-size:calc(11.5px*var(--vr-ts));font-weight:500;color:var(--text);text-transform:none;letter-spacing:0}
.tool-tag:hover{background:var(--vr-s3);border:0}
.tool-tag.active{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);border:0}
.comp-btn{padding:6px 15px;border-radius:999px;font-size:calc(12px*var(--vr-ts));font-weight:600;text-transform:none;letter-spacing:0;background:var(--btn-bg);color:var(--btn-text)}
.comp-btn:hover{filter:brightness(1.1)}
.comp-btn:disabled{background:var(--vr-s3);color:var(--text2)}

/* Publicaciones */
.feed-item{background:var(--vr-s1);border:0;border-radius:var(--r);margin:0 0 8px}
.feed-item .feed-item-header-row{background:transparent}
.feed-header-info h4{font-size:calc(13px*var(--vr-ts));font-weight:700}
.feed-header-info span{font-size:calc(11px*var(--vr-ts))}
.feed-text{font-size:calc(13.5px*var(--vr-ts));line-height:1.5;padding:4px 12px 9px}
.interactions-bar{border-top:0;padding:2px 8px 8px}
.interact-btn{padding:6px 10px;border-radius:999px;font-size:calc(12px*var(--vr-ts));font-weight:500;color:var(--text2);transition:background .18s,color .18s}
.interact-btn:hover{background:var(--vr-s2);color:var(--text)}
.interact-btn.liked{color:var(--green);font-weight:600}

/* ═════════ COLUMNA DERECHA ═════════ */
.right{background:transparent;border-left:0;padding:8px 14px 12px 0;top:var(--vr-top);height:calc(100vh - var(--vr-top))}
.widget{background:var(--vr-s1);border:0;border-radius:var(--r);padding:14px;margin:0 0 8px}
.w-title{font:600 calc(10.5px*var(--vr-ts)) var(--f-mono);letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.hermano,.mini-item{padding:6px 6px;border:0;border-radius:10px}
.hermano:hover,.mini-item:hover{background:var(--vr-s2);border:0}
.hermano img,.mini-img{width:32px;height:32px}
.h-name,.mini-title{font-size:calc(12.5px*var(--vr-ts));font-weight:600}
.h-dv,.mini-sub{font-size:calc(11px*var(--vr-ts))}
.mini-chat-btn{width:30px;height:30px;border:0;background:var(--vr-s2)}
.mini-chat-btn:hover,.mini-chat-btn:focus-visible{background:var(--btn-bg);color:#fff;border:0}
.btn-w{padding:8px;border:0;background:var(--vr-s2);border-radius:999px;font-size:calc(12px*var(--vr-ts));color:var(--text)}
.btn-w:hover{background:var(--vr-s3)}
#widgetBiblioteca .mini-item[style]{border:0 !important;background:var(--vr-s2) !important;border-radius:10px !important}
#widgetBiblioteca img{border:0 !important;border-radius:5px !important}
.rec{padding:10px;background:var(--vr-s2);border:0;border-radius:10px}

/* Tarjeta "Mi universidad" (la crea js/index-renovado.js con los datos del usuario ya cargados) */
.vr-uni{background:color-mix(in srgb,var(--green) 16%,var(--vr-s1));border-radius:var(--r);padding:14px;margin:0 0 8px}
.vr-uni[hidden]{display:none}
.vr-uni-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:600 calc(10.5px*var(--vr-ts)) var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--green) 55%,var(--text))}
.vr-uni-h b{font:600 calc(10px*var(--vr-ts)) var(--f-mono);background:var(--btn-bg);color:#fff;border-radius:999px;padding:2px 8px;letter-spacing:.04em}
.vr-uni-b{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.vr-ring{position:relative;width:80px;height:80px;flex:none}
.vr-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.vr-ring .t{stroke:color-mix(in srgb,var(--text) 14%,transparent)}
.vr-ring .v{stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);animation:vr-glow 3.4s ease-in-out 2s infinite}
@keyframes vr-glow{0%,100%{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--green) 40%,transparent))}50%{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 65%,transparent))}}
.vr-sweep{transform-box:view-box;transform-origin:50% 50%;animation:vr-orbit 3.2s linear infinite;filter:drop-shadow(0 0 3px #fff)}
@keyframes vr-orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vr-ring .v,.vr-sweep{animation:none}}
.vr-ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.vr-ring .c b{font:700 calc(15px*var(--vr-ts))/1 var(--font-title),sans-serif;color:var(--text)}
.vr-ring .c span{font:500 calc(7px*var(--vr-ts))/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--green) 55%,var(--text));margin-top:4px}
.vr-uni-t{min-width:0}
.vr-uni-name{font:700 calc(14px*var(--vr-ts))/1.25 var(--font-title),sans-serif;color:var(--text);overflow-wrap:anywhere}
.vr-uni-xp{font:500 calc(10.5px*var(--vr-ts)) var(--f-mono);color:var(--text2);margin-top:6px}
.vr-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:6px 12px;border:0;border-radius:999px;background:var(--vr-s2);color:var(--text);font:600 calc(12px*var(--vr-ts)) var(--font-primary),sans-serif;cursor:pointer;transition:filter .18s,background .18s}
.vr-btn + .vr-btn{margin-top:6px}
.vr-btn.primary{background:var(--btn-bg);color:#fff}
.vr-btn:hover{filter:brightness(1.12)}

/* ═════════ VENTANAS EMERGENTES ═════════ */
.modal-overlay{background:rgba(6,7,10,.84)}
.modal-box{background:var(--vr-s1);border:0;border-radius:14px}
.modal-header{border-bottom:1px solid var(--vr-s2);font-size:calc(15px*var(--vr-ts))}
.modal-input,.modal-textarea{border-radius:10px}
.btn-primary{border-radius:999px}
.notif-item{border-radius:10px}

/* Tamaño de botones (ADMIPRO): escala relleno, alto y letra de los botones */
.btn-sm{height:calc(28px*var(--vr-bs));padding:calc(5px*var(--vr-bs)) calc(12px*var(--vr-bs));font-size:calc(11px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.comp-btn{padding:calc(6px*var(--vr-bs)) calc(15px*var(--vr-bs));font-size:calc(12px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.tool-tag{padding:calc(5px*var(--vr-bs)) calc(11px*var(--vr-bs));font-size:calc(11.5px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.vr-btn{padding:calc(6px*var(--vr-bs)) calc(12px*var(--vr-bs));font-size:calc(12px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.btn-auth{padding:calc(8px*var(--vr-bs)) 12px;font-size:calc(11.5px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.interact-btn{padding:calc(6px*var(--vr-bs)) calc(10px*var(--vr-bs));font-size:calc(12px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.profile-tab-btn{padding:calc(6px*var(--vr-bs)) calc(12px*var(--vr-bs));font-size:calc(12px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.nav-item{padding:calc(7px*var(--vr-bs)) 11px;font-size:calc(12.5px*var(--vr-ts)*(1 + (var(--vr-bs) - 1)*.5))}
.vr-ic,.vr-av{width:calc(32px*var(--vr-bs));height:calc(32px*var(--vr-bs))}

/* ═════════ PANTALLAS PEQUEÑAS ═════════ */
@media(max-width:768px){
  .layout{grid-template-columns:1fr}
  #vrTop{grid-column:1;padding:8px 12px 8px 60px}
  #vrTop h2{display:none}
  .main{grid-column:1}
  .sidebar{background:var(--rail)}
  #normalFeedContainer{padding:0 10px 12px}
}
@media(max-width:480px){
  .comp-input{font-size:calc(13.5px*var(--vr-ts))}
}