/* ===== NOCTEBOOK · Menú de perfil (foto, alias y tema) ===== */
.pm{position:relative;flex:none;margin-left:auto;font-family:inherit}
.pm[hidden]{display:none!important}
:where(.pm) button,:where(.pm) input[type=text]{all:unset;box-sizing:border-box}
:where(.pm) button{cursor:pointer}
.pm span{position:static}

/* Botón del perfil (como en tu captura) */
.pm-btn{display:flex!important;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:16px;
  background:color-mix(in srgb,var(--sf,#121826) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--ac,#00e5ff) 28%,var(--bd,#243049));
  transition:box-shadow .25s ease,border-color .25s ease,transform .2s ease}
.pm-btn:hover,.pm.on .pm-btn{border-color:color-mix(in srgb,var(--ac,#00e5ff) 70%,transparent);
  box-shadow:0 0 18px -4px color-mix(in srgb,var(--ac,#00e5ff) 65%,transparent)}
.pm-btn:active{transform:scale(.98)}
.pm-btn:focus-visible{outline:2px solid var(--ac,#00e5ff);outline-offset:2px}
.pm-id{display:flex;flex-direction:column;line-height:1.2;text-align:left;min-width:0}
.pm-name{font-size:13.5px;font-weight:700;color:var(--tx,#e6ebf5);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-role{font-size:11.5px;color:var(--ac,#00e5ff)}
.pm-chev{width:16px;height:16px;color:var(--mu,#8a96b2);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.pm.on .pm-chev{transform:rotate(180deg)}

/* Avatar: foto o iniciales */
.pm-av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font-style:normal;font-weight:700;font-size:13px;
  color:#04101a;background:linear-gradient(135deg,#00e5ff,#7c5cff) center/cover no-repeat;
  box-shadow:0 0 0 2px var(--bg,#0b0f17),0 0 0 3.5px color-mix(in srgb,var(--ac,#00e5ff) 70%,transparent);overflow:hidden}
.pm-av.has{color:transparent}
.pm-av-lg{width:56px;height:56px;font-size:19px;position:relative;cursor:pointer}
.pm-av-lg em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:18px;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s;color:#fff}
.pm-av-lg:hover em{opacity:1}

/* Menú desplegable */
.pm-menu{position:absolute;right:0;top:calc(100% + 10px);width:290px;z-index:30;padding:14px;border-radius:18px;
  background:color-mix(in srgb,var(--sf,#121826) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb,var(--ac,#00e5ff) 30%,var(--bd,#243049));
  box-shadow:0 22px 60px -14px rgba(0,0,0,.6),0 0 30px -10px color-mix(in srgb,var(--ac,#00e5ff) 50%,transparent);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.9,.3,1.2),visibility .2s}
.pm.on .pm-menu{opacity:1;visibility:visible;transform:none}
.pm-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--bd,#243049)}
.pm-head b{display:block;font-size:15px;color:var(--tx,#e6ebf5);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-head small{color:var(--ac,#00e5ff);font-size:12px}
.pm-sec{margin:14px 2px 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mu,#8a96b2);font-weight:700}
.pm-row{display:flex;gap:8px}
.pm input[type=text]{flex:1;min-width:0;padding:9px 12px;border-radius:11px;font-size:14px;color:var(--tx,#e6ebf5);
  background:var(--sf2,#182033);border:1px solid var(--bd,#243049);transition:border-color .2s,box-shadow .2s}
.pm input[type=text]:focus{border-color:var(--ac,#00e5ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac,#00e5ff) 22%,transparent)}
.pm-b{padding:9px 13px;border-radius:11px;font-size:13px;font-weight:600;text-align:center;white-space:nowrap;
  color:var(--tx,#e6ebf5);background:var(--sf2,#182033);border:1px solid var(--bd,#243049);transition:border-color .2s,background-color .2s}
.pm-b:hover{border-color:var(--ac,#00e5ff)}
.pm-b.pri{color:#04101a;background:linear-gradient(135deg,#00e5ff,#7c9bff);border-color:transparent}
.pm-b.pri:hover{filter:brightness(1.1)}
.pm-b.grow{flex:1}
.pm-b:focus-visible{outline:2px solid var(--ac,#00e5ff);outline-offset:2px}

/* Selector de tema con pieza deslizante */
.pm-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:13px;background:var(--sf2,#182033);border:1px solid var(--bd,#243049)}
.pm-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ac,#00e5ff) 85%,transparent),#7c5cff);
  box-shadow:0 0 16px -2px color-mix(in srgb,var(--ac,#00e5ff) 70%,transparent);
  transform:translateX(calc(var(--i,0)*100%));transition:transform .35s cubic-bezier(.34,1.35,.4,1)}
.pm-seg button{position:relative;z-index:1;padding:8px 0;text-align:center;font-size:13px;font-weight:600;color:var(--mu,#8a96b2);transition:color .25s}
.pm-seg button.on{color:#04101a}

@media (max-width:960px){.pm-btn{padding:4px}.pm-menu{width:min(290px,92vw)}}
@media (max-width:600px){.pm-id,.pm-chev{display:none}}
@media (prefers-reduced-motion:reduce){.pm *,.pm-menu{transition:none!important}}

/* El tema ahora se cambia desde el perfil: se oculta el botón de la barra superior */
#th{display:none!important}