/* ============================================================
   CLICK TOPBAR V5 · SOLO PC
   Alternativa 5 — moderno con secciones.
   Móvil conserva el menú actual.
   ============================================================ */

.topbar-v5-desktop{display:none}

@media (min-width:761px){
  body .topbar.topbar-auth{
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    min-height:94px!important;
    padding:10px 16px!important;
    border:0!important;
    background:linear-gradient(180deg,rgba(24,13,62,.98),rgba(17,9,45,.98))!important;
    box-shadow:0 9px 28px rgba(11,5,33,.24)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body .topbar.topbar-auth > .topbar-v5-mobile{display:none!important}

  body .topbar.topbar-auth > .topbar-v5-desktop{
    width:min(1540px,calc(100% - 8px))!important;
    min-height:74px!important;
    margin:0 auto!important;
    padding:0 14px 0 0!important;
    display:grid!important;
    grid-template-columns:300px minmax(260px,410px) minmax(460px,1fr) auto auto!important;
    align-items:center!important;
    gap:14px!important;
    overflow:visible!important;
    border:1px solid rgba(137,84,234,.34)!important;
    border-radius:24px!important;
    background:linear-gradient(100deg,rgba(43,17,91,.98) 0 18%,rgba(10,8,29,.98) 25% 100%)!important;
    box-shadow:0 16px 42px rgba(8,4,28,.30),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  .topbar-v5-brandzone{
    position:relative;align-self:stretch;min-width:0;display:flex;align-items:center;gap:13px;
    padding:0 35px 0 20px;overflow:hidden;border-radius:23px 0 0 23px;
    background:radial-gradient(circle at 22% 25%,rgba(152,61,255,.26),transparent 38%),linear-gradient(120deg,#35106d,#22084e 72%,#160836)
  }
  .topbar-v5-brandzone:after{
    content:"";position:absolute;top:-20px;right:-28px;width:64px;height:120px;transform:rotate(28deg);
    background:#0b081e;border-left:1px solid rgba(154,70,255,.48)
  }
  .topbar-v5-logo{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;text-decoration:none!important}
  .topbar-v5-logo img{
    width:82px!important;height:64px!important;object-fit:contain!important;display:block!important;
    filter:drop-shadow(0 8px 16px rgba(133,62,255,.20))!important
  }
  .topbar-v5-tagline{
    position:relative;z-index:2;display:grid;gap:1px;min-width:72px;color:#f6efff;
    font-size:12px;line-height:1.18;font-weight:750;letter-spacing:.01em
  }
  .topbar-v5-tagline span:nth-child(2){color:#d8c8ff}
  .topbar-v5-tagline span:nth-child(3){color:#b99aff}

  .topbar-v5-search{
    position:relative;min-width:0;height:46px;display:flex;align-items:center;padding:0 6px 0 40px;
    border:1px solid rgba(150,121,207,.44);border-radius:999px;background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.10)
  }
  .topbar-v5-search:focus-within{border-color:rgba(164,93,255,.88);box-shadow:0 0 0 3px rgba(139,62,245,.10)}
  .topbar-v5-search-icon{
    position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#ab91e5;font-size:17px;font-weight:900
  }
  .topbar-v5-search input{
    min-width:0;width:100%;height:42px;padding:0 10px 0 0;border:0;outline:0;background:transparent;color:#f5f1ff;font-size:12px
  }
  .topbar-v5-search input::placeholder{color:#958baa}
  .topbar-v5-search button{
    flex:0 0 auto;height:34px;padding:0 17px;border:0;border-radius:999px;
    background:linear-gradient(135deg,#783cff,#ac4cff);color:#fff;font-size:11px;font-weight:900;cursor:pointer;
    box-shadow:0 8px 18px rgba(120,60,255,.22)
  }
  .topbar-v5-search button:hover{filter:brightness(1.07);transform:translateY(-1px)}

  .topbar-v5-nav{
    min-width:0;height:74px;display:flex;justify-content:flex-end;align-items:stretch;gap:5px
  }
  .topbar-v5-nav a{
    position:relative;min-width:66px;padding:10px 8px 8px;display:grid;place-items:center;align-content:center;gap:5px;
    border-radius:14px;color:#cfc8e4!important;text-decoration:none!important;font-size:10px;font-weight:850;white-space:nowrap;transition:.15s ease
  }
  .topbar-v5-nav a b{
    display:grid;place-items:center;width:28px;height:28px;color:#d7c8ff;font-size:18px;line-height:1;font-weight:800
  }
  .topbar-v5-nav a:hover{color:#fff!important;background:rgba(255,255,255,.055)}
  .topbar-v5-nav a.active{color:#fff!important;background:linear-gradient(180deg,rgba(130,64,240,.12),transparent)}
  .topbar-v5-nav a.active b{color:#bb67ff}
  .topbar-v5-nav a.active:after{
    content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:99px;
    background:linear-gradient(90deg,#8e44ff,#df5cff);box-shadow:0 0 10px rgba(185,78,255,.55)
  }

  .topbar-v5-create{
    min-width:92px;height:43px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;
    background:linear-gradient(135deg,#7842ff,#b548f5);color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:900;
    box-shadow:0 11px 26px rgba(126,55,237,.25)
  }
  .topbar-v5-create:hover{transform:translateY(-1px);filter:brightness(1.07)}
  .topbar-v5-create b{
    width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16);font-size:16px;line-height:1
  }

  .topbar-v5-account{position:relative;margin-left:2px}
  .topbar-v5-account summary{
    width:54px;height:50px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0;list-style:none;
    border-left:1px solid rgba(255,255,255,.13);cursor:pointer;user-select:none
  }
  .topbar-v5-account summary::-webkit-details-marker{display:none}
  .topbar-v5-account summary .avatar{
    width:36px!important;height:36px!important;margin:0!important;border-radius:12px!important;
    border:2px solid rgba(255,255,255,.82)!important;box-shadow:0 0 0 1px rgba(160,81,255,.45)!important;object-fit:cover!important
  }
  .topbar-v5-account summary i{color:#c8b7ec;font-size:9px;font-style:normal}
  .topbar-v5-account-menu{
    position:absolute;z-index:1500;top:58px;right:0;width:168px;padding:7px;display:grid;gap:2px;
    border:1px solid rgba(143,94,222,.34);border-radius:15px;background:#17102d;box-shadow:0 18px 44px rgba(5,3,16,.42)
  }
  .topbar-v5-account:not([open]) .topbar-v5-account-menu{display:none}
  .topbar-v5-account-menu a{
    min-height:38px;display:flex;align-items:center;padding:0 11px;border-radius:9px;color:#e7e0f5!important;
    text-decoration:none!important;font-size:11px;font-weight:800
  }
  .topbar-v5-account-menu a:hover{background:rgba(143,74,241,.14);color:#fff!important}
  .topbar-v5-account-menu a:last-child{color:#ff9eb0!important}

  body.profile-premium-v396 .topbar.topbar-auth > .topbar-v5-desktop,
  body.notifications-v4-page .topbar.topbar-auth > .topbar-v5-desktop,
  body.community-v3-page .topbar.topbar-auth > .topbar-v5-desktop,
  body.trends-v3-page .topbar.topbar-auth > .topbar-v5-desktop{display:grid!important}
}

@media (max-width:760px){
  .topbar-v5-desktop{display:none!important}
  .topbar-v5-mobile{display:flex!important}
}

@media (min-width:761px) and (max-width:1250px){
  body .topbar.topbar-auth > .topbar-v5-desktop{
    grid-template-columns:210px minmax(220px,320px) minmax(390px,1fr) auto auto!important;gap:8px!important
  }
  .topbar-v5-brandzone{padding-left:14px;padding-right:28px;gap:8px}
  .topbar-v5-logo img{width:66px!important}
  .topbar-v5-tagline{font-size:10px;min-width:58px}
  .topbar-v5-nav{gap:1px}
  .topbar-v5-nav a{min-width:58px;padding-inline:4px}
  .topbar-v5-create{min-width:78px;padding-inline:12px}
}

@media (min-width:761px) and (max-width:1020px){
  .topbar-v5-tagline{display:none}
  body .topbar.topbar-auth > .topbar-v5-desktop{
    grid-template-columns:112px minmax(210px,270px) minmax(350px,1fr) auto auto!important
  }
  .topbar-v5-nav a{min-width:53px;font-size:9px}
  .topbar-v5-nav a b{font-size:16px}
  .topbar-v5-create span{display:none}
  .topbar-v5-create{min-width:44px;width:44px;padding:0}
}


/* ============================================================
   CLICK TOPBAR V5.1 · TEMA CLARO GLOBAL
   Todas las páginas PC usan la línea gráfica clara.
   SOLO el perfil personalizado conserva el tema oscuro original.
   ============================================================ */

@media (min-width:761px){

  /* ---------- TODAS LAS PÁGINAS EXCEPTO PERFIL ---------- */
  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar.topbar-auth{
    background:linear-gradient(180deg,#fbf9ff,#f5f1fc)!important;
    border-bottom:1px solid #e8e0f4!important;
    box-shadow:0 8px 24px rgba(67,45,107,.08)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar.topbar-auth > .topbar-v5-desktop{
    border:1px solid #ded5ef!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:
      0 12px 34px rgba(72,48,115,.08),
      inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-brandzone{
    background:
      radial-gradient(circle at 20% 28%,rgba(151,91,255,.13),transparent 42%),
      linear-gradient(120deg,#f8f3ff,#eee5ff 72%,#f6f1ff)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-brandzone:after{
    background:#fff!important;
    border-left:1px solid #e0d4f4!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-logo img{
    filter:drop-shadow(0 6px 14px rgba(122,70,205,.10))!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-tagline{
    color:#453761!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-tagline span:nth-child(2){
    color:#65557f!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-tagline span:nth-child(3){
    color:#7d50d4!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-search{
    border:1px solid #ddd3ed!important;
    background:#faf8fd!important;
    box-shadow:
      inset 0 1px 0 #fff,
      0 5px 16px rgba(73,48,111,.045)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-search:focus-within{
    border-color:#a678ef!important;
    background:#fff!important;
    box-shadow:0 0 0 3px rgba(125,74,224,.09)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-search-icon{
    color:#8a70b5!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-search input{
    color:#403558!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-search input::placeholder{
    color:#91869e!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-search button{
    background:linear-gradient(135deg,#7a46ee,#a950e6)!important;
    color:#fff!important;
    box-shadow:0 7px 17px rgba(121,70,221,.17)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-nav a{
    color:#5c536d!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-nav a b{
    color:#76678f!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-nav a:hover{
    color:#4a287c!important;
    background:#f5efff!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-nav a:hover b{
    color:#7c43d6!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-nav a.active{
    color:#6d32cc!important;
    background:linear-gradient(180deg,#f3eaff,#faf7ff)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-nav a.active b{
    color:#8a43e8!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-nav a.active:after{
    background:linear-gradient(90deg,#7842e8,#c44ede)!important;
    box-shadow:0 0 8px rgba(158,70,224,.23)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-create{
    background:linear-gradient(135deg,#7743ea,#aa4be0)!important;
    color:#fff!important;
    box-shadow:0 9px 22px rgba(121,70,221,.17)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-account summary{
    border-left:1px solid #e1d8ef!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-account summary .avatar{
    border:2px solid #fff!important;
    box-shadow:
      0 0 0 1px #d8c7ec,
      0 5px 12px rgba(67,45,106,.10)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-account summary i{
    color:#765d98!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-account-menu{
    border:1px solid #dfd5ed!important;
    background:#fff!important;
    box-shadow:0 18px 42px rgba(55,35,88,.13)!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-account-menu a{
    color:#544966!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-account-menu a:hover{
    background:#f5effc!important;
    color:#7138c9!important;
  }

  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-account-menu a:last-child{
    color:#c34a68!important;
  }

  /* Separación más suave con el contenido claro del sitio */
  html:not([data-theme="dark"]) body:not(.profile-premium-v396) .topbar-v5-desktop{
    color:#403558!important;
  }

  /* ---------- PERFIL ----------
     No se aplican overrides claros.
     Conserva exactamente el tema oscuro original V5.
     ---------- */
}

/* Móvil permanece usando el diseño existente */
@media (max-width:760px){
  body .topbar-v5-desktop{display:none!important}
}

/* CLICK · Ajuste menú cuenta V5 */
@media (min-width:761px){
  .topbar-v5-account-menu{width:236px!important}
}