[hidden]{display:none !important;}
.wccd-wrap,.wccd-wrap *{box-sizing:border-box;}

.wccd-wrap{
  position:relative;
  display:inline-block;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* Botón */
.wccd-btn{
  width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;line-height:1;
  border:1px solid rgba(255,255,255,.10);
  background:#111827;color:#e5e7eb;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.wccd-btn::-moz-focus-inner{border:0;padding:0}

.wccd-wrap:not(.is-open) .wccd-btn:hover{
  background:#0b1220;
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
.wccd-btn:active{transform:translateY(0)}
.wccd-btn:focus{outline:none}
.wccd-btn:focus-visible{box-shadow:0 0 0 3px rgba(59,130,246,.35),0 8px 20px rgba(0,0,0,.25)}

/* Icono */
.wccd-icon{width:18px;height:18px;line-height:18px;font-size:18px;display:block}

/* Abierto: cambia fondo + sin manita */
.wccd-wrap.is-open .wccd-btn{
  cursor:default;
  background:#1f2937;
  border-color:rgba(255,255,255,.16);
  transform:none;
}
.wccd-wrap.is-open .wccd-btn:hover{
  background:#243041;
  border-color:rgba(255,255,255,.18);
  transform:none;
}

/* Tooltip */
.wccd-tip{
  position:absolute;left:50%;top:52px;
  transform:translateX(-50%) translateY(0);
  opacity:0;pointer-events:none;
  z-index:9;
  background:#0b1220;color:#e5e7eb;
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;border-radius:10px;
  font-size:12px;white-space:nowrap;
  box-shadow:0 12px 26px rgba(0,0,0,.30);
  transition:opacity .14s ease,transform .14s ease;
  transition-delay:0s;
}
.wccd-tip:before{
  content:"";position:absolute;top:-6px;left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#0b1220;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.12));
}
.wccd-wrap:not(.is-open) .wccd-btn:hover + .wccd-tip{
  opacity:1;
  transform:translateX(-50%) translateY(2px);
  transition-delay:.22s;
}
.wccd-wrap.is-open .wccd-tip{opacity:0;transform:translateX(-50%) translateY(0);transition-delay:0s}

/* Panel centrado */
.wccd-panel{
  position:absolute;left:50%;top:54px;
  transform:translateX(-50%);
  min-width:260px;max-width:340px;
  background:#0b1220;color:#e5e7eb;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 18px 42px rgba(0,0,0,.35);
  padding:8px;
  z-index:9999;
}

/* Scroll */
.wccd-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.wccd-list::-webkit-scrollbar{width:10px}
.wccd-list::-webkit-scrollbar-thumb{
  background:rgba(229,231,235,.18);
  border-radius:999px;
  border:3px solid rgba(11,18,32,1);
}
.wccd-list::-webkit-scrollbar-track{background:transparent}

/* Depth */
.wccd-d0{--wccd-indent:0px}
.wccd-d1{--wccd-indent:14px}
.wccd-d2{--wccd-indent:28px}
.wccd-d3{--wccd-indent:42px}
.wccd-d4{--wccd-indent:56px}
.wccd-d5{--wccd-indent:70px}
.wccd-d6{--wccd-indent:84px}

/* Labels */
.wccd-label{padding:10px 10px 6px;margin-top:4px;border-top:1px solid rgba(255,255,255,.08);opacity:.9}
.wccd-label-text{
  display:block;
  padding-left:calc(10px + var(--wccd-indent, 0px));
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(229,231,235,.75);
}

/* Items */
.wccd-item a{
  display:flex;gap:10px;align-items:center;
  padding:8px 10px;
  padding-left:calc(10px + var(--wccd-indent, 0px));
  border-radius:12px;
  color:#e5e7eb;text-decoration:none;
  transition:background .12s ease;
}
.wccd-item a:hover{background:rgba(255,255,255,.06)}
.wccd-thumb{
  width:32px;height:32px;border-radius:10px;
  object-fit:cover;flex:0 0 32px;
  border:1px solid rgba(255,255,255,.10);
  background:#111827;
}
.wccd-name{font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Loader */
.wccd-loader{display:none;padding:10px 10px 6px;justify-content:center;align-items:center}
.wccd-loader.is-show{display:flex}
.wccd-loader::before{
  content:"";width:18px;height:18px;border-radius:999px;
  border:2px solid rgba(229,231,235,.22);
  border-top-color:rgba(229,231,235,.85);
  animation:wccdSpin .75s linear infinite;
  box-shadow:0 0 0 4px rgba(255,255,255,.03) inset;
}
@keyframes wccdSpin{to{transform:rotate(360deg)}}