:root{--bg:#17141f;--panel:#211c2c;--raised:#2d2639;--line:#3a3248;--text:#ece8f4;--dim:#a79fb8;--accent:#f0b429;--on-accent:#1b1500;--link:#ffd166;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column}
body{background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{display:grid;grid-template-columns:68px 1fr;flex:1;min-height:0}
#rail{background:var(--bg);padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:8px;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--line)}
#rail button{position:relative;width:46px;height:46px;border-radius:14px;border:0;background:var(--raised);color:var(--text);font:600 18px inherit;cursor:pointer;transition:border-radius .15s,background .15s}
#rail button:hover,#rail button.on{border-radius:23px;background:var(--accent);color:var(--on-accent)}
#rail button.out{background:transparent;border:1.5px dashed var(--line);color:var(--dim)}
#rail hr{width:32px;border:0;border-top:1px solid var(--line);margin:2px 0}
#rail button.dm{padding:0;background:none}
#rail button.dm .avatar{width:46px;height:46px;font-size:18px}
#rail button.dm.on{box-shadow:0 0 0 2px var(--link)}
#rail .badge{position:absolute;right:-2px;top:-4px}
aside{background:var(--panel);display:flex;flex-direction:column;min-width:0;min-height:0}
header{padding:14px 16px;font-weight:600;border-bottom:1px solid var(--line)}
.badge{background:var(--link);color:var(--bg);border-radius:10px;padding:0 7px;font-size:12px}
main{display:flex;flex-direction:column;min-width:0;min-height:0}
#messages{list-style:none;margin:0;padding:12px 16px;flex:1;overflow-y:auto}
#messages li{display:flex;gap:10px;padding:2px 8px;margin-top:10px;border-radius:6px;position:relative}
#messages li.grouped{margin-top:0}
#messages li:hover{background:rgba(255,255,255,.03)}
#messages li.mentioned{background:rgba(22,185,212,.12);box-shadow:inset 3px 0 var(--link)}
#messages .main{min-width:0;max-width:72ch}
#messages b{margin-right:8px}
#messages time{color:var(--dim);font-size:12px}
#messages p{margin:0;overflow-wrap:anywhere}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff}
.avatar-gap{flex:none;width:36px}
.quote{color:var(--dim);font-size:13px;border-left:2px solid var(--line);padding-left:8px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mention{color:var(--link);background:rgba(22,185,212,.14);border-radius:4px;padding:0 3px}
.mention.me{background:rgba(22,185,212,.35)}
.main a{color:var(--link);word-break:break-all}
.main a.img img{display:block;max-width:min(360px,100%);max-height:300px;border-radius:8px;margin-top:4px}
.reactions{display:flex;flex-wrap:wrap;gap:4px}
.reactions:not(:empty){margin-top:4px}
.reactions button{background:var(--raised);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:0 8px;cursor:pointer}
.reactions button.on{border-color:var(--link);background:rgba(22,185,212,.15)}
.tools{position:absolute;right:8px;top:-14px;display:none;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2px}
#messages li:hover .tools,#messages li:focus-within .tools{display:flex}
.tools button{background:none;border:0;color:var(--text);cursor:pointer;border-radius:6px;padding:2px 6px}
.tools button:hover{background:var(--raised)}
#typing{min-height:20px;padding:0 16px;color:var(--dim);font-size:13px}
#replyBar{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;background:var(--panel);border-top:1px solid var(--line);color:var(--dim);font-size:13px}
#replyBar[hidden]{display:none}
#replyBar button{background:none;border:0;color:var(--dim);cursor:pointer}
#composer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
#composer input{flex:1}
input{background:var(--raised);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;font:inherit}
button{font:inherit}
#composer button,#authGo{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
#composer #attach{background:var(--raised);border:1px solid var(--line);color:var(--text);padding:0 12px}
#memberList{list-style:none;margin:0;padding:8px;overflow-y:auto}
#memberList li{display:flex;align-items:center;gap:8px;padding:4px 8px;color:var(--dim);position:relative}
#memberList li[role=button]:hover{background:var(--raised);border-radius:6px}
#memberList li.on{color:var(--text)}
#memberList .avatar{width:28px;height:28px;font-size:13px;opacity:.6}
#memberList li.on .avatar{opacity:1}
#memberList li.on::after{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80;position:absolute;left:30px;bottom:6px;border:2px solid var(--panel);box-sizing:content-box}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:24px;width:min(340px,92vw)}
dialog::backdrop{background:rgba(10,8,16,.8)}
#authForm,#codeForm{display:flex;flex-direction:column;gap:10px}
#authForm h1,#codeForm h1{margin:0 0 4px;font-size:22px}
#authError{color:#ff8f8f;margin:0;min-height:1.5em}
.link{background:none;border:0;color:var(--dim);text-decoration:underline;cursor:pointer}
#mentions{list-style:none;margin:0 16px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:8px;max-height:220px;overflow-y:auto}
#mentions[hidden]{display:none}
#mentions li{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;cursor:pointer}
#mentions li.on,#mentions li:hover{background:var(--raised)}
#mentions .avatar{width:24px;height:24px;font-size:12px}
#commSettings{background:none;border:0;color:var(--dim);cursor:pointer;font-size:17px;border-radius:6px;padding:0 6px}
#commSettings:hover{background:var(--raised);color:var(--text)}
#rail .lock{position:absolute;right:-2px;bottom:-2px;font-size:13px}
#memberList .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:11px;color:var(--link);border:1px solid var(--line);border-radius:6px;padding:0 5px}
#memberList .more{background:none;border:0;color:var(--dim);cursor:pointer;border-radius:6px;padding:0 6px;font-size:16px}
#memberList .more:hover{background:var(--line);color:var(--text)}
dialog .box,dialog form{display:flex;flex-direction:column;gap:10px}
dialog.wide,dialog:has(.wide){width:min(640px,94vw)}
dialog h1{margin:0 0 4px;font-size:20px}
dialog h2{margin:8px 0 0;font-size:14px;color:var(--dim)}
dialog button{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
dialog button.ghost{background:var(--raised);color:var(--text)}
dialog button.danger{background:#5b2330;color:#ffd5db}
.row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.row input{flex:1;min-width:0}
.check{display:flex;gap:8px;align-items:flex-start;color:var(--dim);font-size:14px}
.hint{color:var(--dim);font-size:13px;margin:0}
#memberActions{display:flex;flex-direction:column;gap:6px}
#memberActions button{text-align:left}
#banList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#banList li{display:flex;justify-content:space-between;align-items:center;gap:8px}
#banList button{padding:4px 10px;font-size:13px}
#userTable{width:100%;border-collapse:collapse;font-size:14px}
#userTable th{text-align:left;color:var(--dim);font-weight:500;padding:4px 6px;border-bottom:1px solid var(--line)}
#userTable td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
#userTable button{padding:4px 10px;font-size:13px}
#resetResult{background:var(--raised);border:1px solid var(--link);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px}
#resetResult p{margin:0}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--raised);border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:10px;max-width:min(520px,92vw);z-index:10;box-shadow:0 6px 24px rgba(0,0,0,.4)}
#toast[hidden]{display:none}

/* v0.4: feed, perfiles, avisos, búsqueda */
[hidden]{display:none!important}
.who{cursor:pointer}.who:hover{text-decoration:underline}
#feed{flex:1;overflow-y:auto;padding:12px 16px;min-height:0}
#postForm{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px}
textarea{flex:1;background:var(--raised);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;font:inherit;resize:vertical}
#postForm button,.comment-form button,#bioForm button,#profileDm,#profileEdit{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
#postList{list-style:none;margin:0;padding:0}
.post{display:flex;gap:10px;padding:12px 8px;border-top:1px solid var(--line)}
.post .main{min-width:0;flex:1;max-width:80ch}
.post p{margin:2px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.post time,.comment time{color:var(--dim);font-size:12px;margin-left:8px}
.post-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.post-actions button{background:var(--raised);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:2px 10px;cursor:pointer}
.post-actions button.on{border-color:var(--link);background:rgba(22,185,212,.15)}
.comments{margin-top:8px;padding-left:10px;border-left:2px solid var(--line)}
.comment{display:flex;gap:8px;margin-bottom:8px}
.comment .avatar{width:28px;height:28px;font-size:13px}
.comment p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.comment .x{background:none;border:0;color:var(--dim);cursor:pointer;margin-left:6px}
.comment-form{display:flex;gap:8px}.comment-form input{flex:1;min-width:0}
.empty{padding:24px;text-align:center;list-style:none}
#postMore{display:block;margin:8px auto}
#profileHead{display:flex;align-items:center;gap:12px}#profileHead .avatar{width:56px;height:56px;font-size:24px}#profileHead h1{margin:0}
#profileBio{white-space:pre-wrap;overflow-wrap:anywhere}
#bioForm{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px}
#notifList{list-style:none;margin:0;padding:0;max-height:55vh;overflow-y:auto}
#notifList li.new{box-shadow:inset 3px 0 var(--link)}
.notif,.hit{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--text);padding:8px;border-radius:8px;cursor:pointer;align-items:flex-start}
.notif:hover,.hit:hover{background:var(--raised)}
.notif .txt{min-width:0;overflow-wrap:anywhere}.notif time{color:var(--dim);font-size:12px}
.hit{flex-direction:column;gap:0}.hit span{overflow-wrap:anywhere}
.hit .avatar{align-self:center}
#searchInput{width:100%}
#searchResults{max-height:50vh;overflow-y:auto}
#searchResults h2{font-size:13px;color:var(--dim);margin:12px 0 4px}
@media (max-width:820px){#postForm{flex-wrap:wrap}#postForm #postBox{flex:1 1 100%}#postForm #postGo{flex:1}}
#postBox{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
#postPreview{position:relative;width:max-content;max-width:100%}
#postPreview img{display:block;max-width:220px;max-height:160px;border-radius:8px}
#postPreview button{position:absolute;top:4px;right:4px;border:0;border-radius:50%;width:24px;height:24px;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}
#postForm #postAttach{background:var(--raised);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;cursor:pointer}
.post .main a.img img{max-width:min(420px,100%);max-height:360px}
select{background:var(--raised);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 10px;font:inherit}

/* v0.5: consultas */
#qs,#qd{flex:1;overflow-y:auto;padding:12px 16px;min-height:0}
#qBar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
#qBar #qSearch{flex:1;min-width:160px}
#qBar #qAsk,#askGo,#catForm button:not(.ghost),.answer-form button{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
#qList,.answers{list-style:none;margin:0;padding:0}
.qcard button{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.qcard button{transition:transform .15s ease}.qcard button:hover{transform:scale(1.015)}
.qtop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.qtitle{font-weight:600;overflow-wrap:anywhere}
.qstatus{flex:none;font-size:12px;border-radius:10px;padding:1px 8px;border:1px solid var(--line);color:var(--dim)}
.qstatus.resuelta{color:#7ee2a0;border-color:#2f7a4b;background:rgba(46,160,90,.12)}
.qmeta{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0;align-items:center}
.qeq{color:var(--dim);font-size:13px}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--raised);border-radius:4px;padding:0 6px}
.qfoot{color:var(--dim);font-size:12px}
.tag.good{color:#7ee2a0;border-color:#2f7a4b}
.back{margin-bottom:8px}
.qhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.qhead h1{margin:0;font-size:22px;overflow-wrap:anywhere}
.qbody{margin:10px 0;max-width:80ch}.qbody p{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0}.qbody h2,.answers-title{font-size:13px;color:var(--dim);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.answer{display:flex;gap:10px;padding:10px 8px;border-top:1px solid var(--line)}
.answer.solution{background:rgba(46,160,90,.08);box-shadow:inset 3px 0 #2f7a4b;border-radius:6px}
.answer .main{min-width:0;flex:1;max-width:80ch}.answer p{white-space:pre-wrap;overflow-wrap:anywhere;margin:2px 0}.answer time{color:var(--dim);font-size:12px;margin-left:8px}
.answer-form{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.wideform{width:min(620px,92vw)}
.wideform label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--dim)}
.wideform label input,.wideform label select,.wideform label textarea{color:var(--text);font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#askSimilarBox{border:1px dashed var(--link);border-radius:8px;padding:6px 8px}
#askSimilar{list-style:none;margin:0;padding:0}
#askImgRow{display:flex;gap:10px;align-items:center}
#askPreview{position:relative}#askPreview img{display:block;max-height:70px;border-radius:6px}
#askPreview button{position:absolute;top:2px;right:2px;border:0;border-radius:50%;width:20px;height:20px;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}
#catList{list-style:none;margin:0;padding:0;max-height:40vh;overflow-y:auto}
#catList li{display:flex;align-items:center;gap:6px;padding:3px 0}#catList li span{flex:1}#catList li.child{padding-left:20px;color:var(--dim)}
#catList .x{background:none;border:0;color:var(--dim);cursor:pointer}
#catForm{flex-wrap:wrap}#catForm input{flex:1;min-width:140px}
@media (max-width:820px){.two{grid-template-columns:1fr}.answer-form{flex-direction:column;align-items:stretch}}
dialog:has(.wideform){width:min(660px,94vw);max-height:92vh;overflow-y:auto}
dialog:has(#catList){width:min(520px,94vw)}
.answer .tag{margin-left:8px}
#qBar #qSearch{min-width:120px}

#qChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;align-items:center}
.chip{background:var(--raised);border:1px solid var(--line);color:var(--text);border-radius:16px;padding:3px 12px;cursor:pointer;font:inherit;font-size:14px}
.chip.on{border-color:var(--link);background:rgba(22,185,212,.18)}
#qChips .sep{color:var(--dim)}
.qtop{flex-wrap:wrap}.qthumb{flex:none;width:72px;height:54px;object-fit:cover;border-radius:6px;margin-left:auto;order:3}
.qprev{color:var(--dim);font-size:14px;margin:2px 0;overflow-wrap:anywhere}

/* v0.6: barra superior y herramientas de la barra lateral */
#topbar{display:flex;align-items:center;gap:6px;height:48px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
#topbar .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px}
#topbar .logo small{font-weight:400;font-size:12px;color:var(--dim)}
#topbar .mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent)}
#topbar .grow{flex:1}
#topbar .nav{position:relative;background:none;border:1px solid transparent;color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit}
#topbar .nav:hover{background:var(--raised)}
#topbar .badge{position:absolute;right:-2px;top:-4px}
#sideAsk{flex:none;width:36px;height:36px;border-radius:10px;border:0;background:var(--accent);color:var(--on-accent);font:700 20px/1 inherit;cursor:pointer}
@media (max-width:820px){#topbar .logo small,#navUser{display:none}}

.railLabel{font-size:9px;text-transform:uppercase;letter-spacing:.02em;color:var(--dim);text-align:center;width:100%;margin-top:2px}
#catList .add{flex:none;background:none;border:1px solid var(--line);color:var(--link);border-radius:8px;padding:1px 8px;font-size:12px;cursor:pointer}
#catList .add:hover{background:var(--raised)}

#qChips{flex-direction:row}
#qChips .chiprow{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-left:6px;border-left:2px solid var(--link)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
#askForm .chip{padding:8px 14px;font-size:15px}
#askForm .chip.other{border-style:dashed;color:var(--dim)}
.step{margin:4px 0;color:var(--dim)}.step b{color:var(--text)}
#askCrumb{display:flex;align-items:center;gap:10px}
dialog button.link{background:none;color:var(--dim);padding:2px 6px;font-weight:400}

/* v0.7: distribución nueva */
#rail button.add{width:46px;height:46px;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:24px;font-weight:700;line-height:1}
#topbar .tab{margin-left:4px;font-weight:600}
#topbar .tab.on{background:var(--raised);box-shadow:inset 0 -2px var(--link)}
#navAvatar .avatar{width:24px;height:24px;font-size:12px;display:inline-grid;vertical-align:middle}
aside{overflow:hidden}
.count{margin-left:auto;font-size:11px;color:var(--dim);background:var(--raised);border-radius:8px;padding:0 6px}
#adminTabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}
#adminTabs button{background:var(--raised);color:var(--text)}
#adminTabs button.on{background:var(--accent);color:var(--on-accent)}
.pane{min-height:240px;max-height:56vh;overflow-y:auto}
#statGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.stat{background:var(--raised);border-radius:10px;padding:12px;display:flex;flex-direction:column}.stat b{font-size:26px}.stat span{color:var(--dim);font-size:13px}
.who-cell{display:flex;align-items:center;gap:8px}.who-cell .avatar{width:28px;height:28px;font-size:13px}
#commTable td.acts{display:flex;gap:6px;flex-wrap:wrap}
label.inline{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#avatarEdit{display:flex;gap:8px;flex-wrap:wrap}
#rail button.main{background:var(--raised);font-size:20px}
#rail button.addg{background:none;border:2px dashed var(--line);color:var(--dim);width:46px;height:46px;border-radius:14px;font-size:20px}
#rail button.addg:hover{color:var(--text);border-color:var(--link)}

/* Inicio */
#home{padding:16px 20px;overflow-y:auto;flex:1}
.homeTitle{margin:0 0 12px;font-size:18px}
#homeList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:760px}
.homeCard{display:block;width:100%;text-align:left;background:var(--panel,var(--raised));border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);cursor:pointer;font:inherit}
.homeCard{transition:transform .15s ease}.homeCard:hover{transform:scale(1.015)}
.homeItem.solved .homeCard{border-left:3px solid #7ee2a0}.homeItem.question .homeCard{border-left:3px solid var(--link)}
.homeHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}.homeHead .avatar{width:26px;height:26px;font-size:12px}
.homeHead .time{margin-left:auto;color:var(--dim);font-size:12px}.homeHead .dim{color:var(--dim)}
.chip.grp{font-size:12px;padding:1px 8px;cursor:default}
.homeQ{margin:8px 0 4px;font-size:16px}.homeText{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.homeMeta{display:flex;gap:6px;flex-wrap:wrap}

/* Celular: menú ☰ que despliega grupos y consultas */
#menuBtn{display:none}
#regMode{width:100%;margin-bottom:8px}
@media (max-width:700px){
  #menuBtn{display:inline-block;font-size:20px;padding:4px 10px}
  #topbar{gap:2px;padding:0 6px}
  #topbar .logo small,#topbar .logo .txt,#navUser,.lbl{display:none}
  #topbar .tab{margin-left:0;padding:6px 8px;font-size:18px}
  #app{display:block;position:relative;height:calc(100dvh - 48px)}
  main{height:100%}
  #rail{position:fixed;top:48px;bottom:0;z-index:20;transform:translateX(-100vw);transition:transform .2s}
  #rail{left:0;width:60px}
  body.nav-open #rail{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:48px 0 0 0;background:rgba(10,8,16,.6);z-index:15}
  #homeList,#feed,#home{padding-left:10px;padding-right:10px}
  .homeHead .time{margin-left:0}
  #qBar{flex-wrap:wrap}
  dialog{width:94vw;max-width:94vw;box-sizing:border-box;max-height:92dvh;overflow-y:auto;padding:16px}
  dialog input,dialog textarea,dialog select{box-sizing:border-box;max-width:100%}
  dialog form,dialog .box{max-width:100%}
  #composer{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  #admin .box,#admin{width:96vw}
  .pane{max-height:60dvh}
  table{font-size:13px;display:block;overflow-x:auto}
}

/* El avatar del usuario reemplaza al logo y lleva a Inicio */
#topbar #navAvatar.logo{background:none;border:0;padding:2px 4px;cursor:pointer}
#navAvatar .avatar{width:34px;height:34px;font-size:16px;display:inline-grid;transition:box-shadow .15s}
#navAvatar:hover .avatar,#navAvatar.on .avatar{box-shadow:0 0 0 2px var(--link)}
#navUser{margin-right:4px}
#navAvatar .logoImg{width:38px;height:38px;border-radius:50%;display:block}
#navAvatar:hover .logoImg,#navAvatar.on .logoImg{box-shadow:0 0 0 2px var(--link)}

/* Visor de PDF */
#pdfView{width:min(980px,98vw);height:94dvh;max-width:98vw;padding:0;display:none;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
#pdfView[open]{display:flex}
#pdfBar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
#pdfBar b{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pdfBar .grow{flex:1}
#pdfBar .btn{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--text);border:1px solid var(--line);font-size:14px}
#pdfPage{min-width:56px;text-align:center;font-size:14px;color:var(--dim)}
#pdfPages{flex:1;overflow:auto;padding:12px;background:#021218}
.pdfPage{margin:0 auto 12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.pdfPage canvas{display:block}
.pdfCard{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:6px;max-width:520px}
.pdfCard .pdfOpen{background:var(--accent);color:var(--on-accent);font-weight:700}
.pdfCard .pdfName{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:13px}
.pdfCard .pdfDl{font-size:13px;color:var(--dim)}
.pdfTag{display:inline-block;padding:4px 8px;background:var(--raised);border-radius:8px;font-size:13px;margin-right:6px}
.qthumb.pdfIcon{display:grid;place-items:center;font-size:28px;background:var(--raised);border-radius:8px}
@media (max-width:700px){#pdfView{width:100vw;max-width:100vw;height:100dvh;border-radius:0}#pdfBar b{max-width:100%;flex-basis:100%}}

/* Pie del formulario de consulta: adjuntar a la izquierda; cancelar y publicar a la derecha, mismo alto */
.askActions{align-items:center;flex-wrap:nowrap;margin-top:14px}
.askActions .grow{flex:1}
.askActions button{height:40px;padding:0 16px;white-space:nowrap}
#ask{overflow-x:hidden}
#askImgRow:has(#askPreview[hidden]){display:none}
@media (max-width:700px){.askActions{flex-wrap:wrap}.askActions .grow{display:none}.askActions #askAttach{flex-basis:100%}}
.askActions button{display:inline-flex;align-items:center;justify-content:center;line-height:1;border:0}
button.ghost,.ghost.back{background:var(--raised);color:var(--text);border:0;border-radius:8px;padding:7px 12px;cursor:pointer;font:inherit}
button.ghost:hover{background:var(--accent)}

/* ---- v0.12: sin segunda columna; Chat, Buscar y Conectar arriba ---- */
#app{position:relative}
aside#members{border-left:1px solid var(--line);overflow:hidden}
body.show-connect #app{grid-template-columns:68px 1fr 260px}
aside#members[hidden]{display:none}
#members header{display:flex;justify-content:space-between;align-items:center}
#members header button{background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px}
#members .hint.pad{padding:8px 14px 0;margin:0}
#memberList{flex:1}
#topbar .nav.on{background:var(--raised);border-color:var(--line)}
#groupBar{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
#groupBar .gInfo{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
#groupBar .gInfo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#groupAbout{color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gicon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--raised);font-size:18px;font-weight:600;overflow:hidden}
.iconRow{align-items:center;gap:8px}
.iconRow input:not([type=file]){flex:1;min-width:0}
.pickList{list-style:none;margin:6px 0;padding:0;max-height:160px;overflow-y:auto}
.pickList .pick{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:var(--text);padding:4px 8px;border-radius:6px;cursor:pointer;font:inherit;text-align:left}
.pickList .pick:hover,.pickList .pick.on{background:var(--raised)}
.pickList .pick .name{flex:1}
.pickList .avatar{width:26px;height:26px;font-size:12px}
.chosen{display:flex;flex-wrap:wrap;gap:4px}
.chosen .chip{background:var(--accent);color:var(--on-accent);border:0;border-radius:12px;padding:2px 10px;cursor:pointer;font:inherit;font-size:13px}
#newComm textarea,#aboutBox textarea{width:100%;resize:vertical}
#inviteList{list-style:none;margin:0 0 8px;padding:0}
#inviteList .invite{display:flex;gap:10px;padding:8px;background:var(--raised);border-radius:10px;margin-bottom:6px}
#inviteList .txt{flex:1;min-width:0}
#inviteList .row{margin-top:6px;justify-content:flex-start}
@media (max-width:700px){
  #app{display:block}
  body.show-connect #app{display:block}
  aside#members{position:fixed;top:48px;right:0;bottom:0;z-index:20;width:min(300px,100vw);box-shadow:-8px 0 24px rgba(0,0,0,.35)}
  #groupBar{padding:6px 10px}
  #topbar .nav{padding:6px 5px;font-size:17px;flex:none}
  #topbar .chev,#topbar .logo{margin:0}
  #topbar .tab{padding:6px 5px}
  #navAvatar{padding:2px 4px}
}

/* ---- Manuales ---- */
#manuals{flex:1;min-height:0;overflow-y:auto;padding:12px 16px}
#manBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#manBar #manSearch{flex:1;min-width:180px}
#manTabs{display:flex;gap:4px;margin:12px 0 4px;border-bottom:1px solid var(--line)}
#manTabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);padding:6px 12px;cursor:pointer;font:inherit}
#manTabs button.on{color:var(--text);border-bottom-color:var(--link)}
.manBrandH{margin:18px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--link)}
.manRow{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 10px;background:var(--panel);border-radius:10px;margin-bottom:6px}
.manRow.pendiente{box-shadow:inset 3px 0 #e2b24a}.manRow.oculto{opacity:.6}
.manMain{flex:1;min-width:220px}
.manMeta{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.manMeta .tag{font-size:12px;color:var(--dim);background:var(--bg);border-radius:8px;padding:0 8px}
.manMeta .tag.warn{color:#e2b24a}
.manActs{display:flex;flex-wrap:wrap;gap:4px}
.manActs button{font-size:13px;padding:4px 10px}
.manLink{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:2px 10px;cursor:pointer;font:inherit;font-size:14px}
#manUp{width:min(880px,96vw);max-width:96vw}
#manUp .box{width:auto;min-width:0}
#manAll{flex-wrap:wrap}#manAll input{flex:1 1 160px;min-width:0}
#manUp .row{flex-wrap:wrap}
#manRows{max-height:55vh;overflow-y:auto;margin:8px 0}
.upRow{background:var(--bg);border-radius:10px;padding:8px;margin-bottom:6px}
.upRow.error{box-shadow:inset 3px 0 #e2706a}.upRow.hecho{box-shadow:inset 3px 0 #4ade80;opacity:.75}
.upTop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.upName{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upFields{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.upFields input{flex:1 1 140px;min-width:0}.upFields input.wide{flex:2 1 260px}
.upState{font-size:12px;color:var(--dim);min-height:16px;margin-top:2px}
@media (max-width:700px){#manuals{padding:10px}#manActs,.manActs{width:100%}}

.tbx{display:inline-block;line-height:1;vertical-align:-.25em}
.tbx svg,.tbx img{width:1.25em;height:1.25em;display:block}
.gicon .tbx,#rail button.main .tbx{display:flex;align-items:center;justify-content:center;vertical-align:baseline}
#rail button.main .tbx svg,#rail button.main .tbx img{width:40px;height:40px}
.gicon .tbx svg,.gicon .tbx img{width:26px;height:26px}
#topbar .tab .tbx svg{width:20px;height:20px}

#manImp{width:min(720px,94vw);max-width:94vw}
#manImp .box{width:auto;min-width:0}
#manImp .row{flex-wrap:wrap}
.impBig{font-size:18px;font-weight:600;margin:4px 0}
#impBar{height:8px;background:var(--bg);border-radius:6px;overflow:hidden}#impFill{height:100%;background:var(--link);transition:width .3s}
#impLog{list-style:none;margin:0;padding:0;max-height:34vh;overflow-y:auto;font-size:13px}
#impLog li{padding:3px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
#impLog li.pendiente b{color:#e2b24a}#impLog li.error b{color:#e2706a}#impLog li .dim{color:var(--dim)}

.qnew{background:var(--link);color:var(--bg);border-radius:8px;padding:0 8px;font-size:12px;font-weight:700;align-self:center}
#dmBar{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
#dmBar[hidden]{display:none}
#dmBar .avatar{width:32px;height:32px;font-size:14px}
#dmBar .grow{flex:1}
#rail .railLabel{margin-top:2px}

#themeColors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}#themeColors label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}#themeColors input{width:40px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}#themePresets button.on{outline:2px solid var(--accent)}
li.post.pend{opacity:.85;outline:1px dashed var(--accent);outline-offset:-1px}
#topQs[hidden]{display:none}
.homeItem.unread .homeCard,.qcard.unread>button{border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 12px color-mix(in srgb,var(--accent) 35%,transparent)}
#connSearch{width:100%}#connResults{padding:0 8px;margin:6px 0}#connResults li{display:flex;align-items:center;gap:8px;padding:4px 0}#connResults .name{flex:1;overflow:hidden;text-overflow:ellipsis}

/* ---- Cursos ---- */
#courses{flex:1;min-height:0;overflow-y:auto;padding:12px 16px}
#curBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#curBar #curSearch{flex:1;min-width:180px}
#curNew,.curActs button:not(.ghost),#stuList button:not(.ghost),#stuResults button,#curReqs .manActs button:not(.ghost){background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer}
#curTabs{display:flex;gap:4px;margin:12px 0 4px;border-bottom:1px solid var(--line);overflow-x:auto}
#curTabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);padding:6px 12px;cursor:pointer;font:inherit;white-space:nowrap}
#curTabs button.on{color:var(--text);border-bottom-color:var(--link)}
#curNote:empty{display:none}
#curGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:10px}
.curCard{display:flex;flex-direction:column;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;color:var(--text);cursor:pointer;font:inherit}
.curCard:hover{border-color:var(--link)}
.curCover{aspect-ratio:16/9;background:linear-gradient(135deg,var(--raised),var(--bg)) center/cover;display:flex;align-items:center;justify-content:center;font-size:42px;flex:none}
.curCover.big{width:min(360px,100%);border-radius:12px}
.curInfo{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;min-width:0;flex:1}
.curInfo h3,.curInfo h2{margin:0;line-height:1.25}
.curSum{margin:0;color:var(--dim);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.curHero .curSum{-webkit-line-clamp:unset;font-size:15px}
.curWho{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim)}
.curWho .avatar{width:22px;height:22px;font-size:11px}
button.curWho{background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:none;align-self:flex-start}
button.curWho:hover span:last-child{text-decoration:underline;color:var(--text)}
.tag.price{color:var(--accent);border-color:var(--accent)}
.curProg{height:6px;border-radius:3px;background:var(--bg);overflow:hidden}.curProg span{display:block;height:100%;background:#4ade80}
.curAbout{margin:6px 0 0;white-space:pre-wrap;font-size:14px}
.curBack{margin-bottom:10px}
.curHero{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.curHero .curInfo{padding:0;min-width:240px}
.curBanner{margin:12px 0 0;padding:8px 12px;border-radius:10px;background:var(--panel);border-left:3px solid #e2b24a;font-size:14px}
.curBanner.rechazado,.curBanner.oculto{border-left-color:#e2706a}
.curActs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0}
.curActs .hint{flex-basis:100%}
.curActs a.btn{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--text);background:var(--raised)}
.curActs button.danger{background:#5b2330;color:#ffd5db}
.curPay{background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:10px 14px;margin:6px 0 12px}
.curPay p{margin:6px 0 0}
.curBody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;margin-top:8px}
.player{position:relative;aspect-ratio:16/9;width:100%;background:#000;border-radius:12px;overflow:hidden}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.empty{display:flex;align-items:center;justify-content:center;color:var(--dim);background:var(--panel);font-size:14px}
#lesPreview .player{margin-top:4px}
.lesHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.lesHead h3{margin:0}
.lesText{color:var(--text);font-size:15px}.lesText p{margin:6px 0;white-space:pre-wrap}
.curLessons h3{margin-top:0}
.lesList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lesList li{display:flex;align-items:center;gap:4px;background:var(--panel);border-radius:10px;border:1px solid transparent}
.lesList li.on{border-color:var(--link)}
.lesList li.locked{opacity:.65}
.lesBtn{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--text);padding:8px 10px;text-align:left;cursor:pointer;font:inherit}
.lesNum{flex:none;width:24px;height:24px;border-radius:50%;background:var(--raised);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim)}
.lesTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lesTools{display:flex;gap:2px;padding-right:4px}.lesTools button{padding:3px 7px;font-size:12px}
.seg{display:flex;gap:16px}.seg label{display:flex;gap:6px;align-items:center}
#stuResults li,#stuList li{display:flex;align-items:center;gap:8px;padding:4px 0}
#stuResults .name,#stuList .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#stuList{list-style:none;margin:0;padding:0;max-height:45vh;overflow-y:auto}
#stuList button{padding:5px 10px;font-size:13px}
.stuRow.solicitado .txt b{color:var(--accent)}
@media (max-width:820px){.curBody{grid-template-columns:1fr}}
@media (max-width:700px){#courses{padding:10px}.curCover.big{width:100%}#curGrid{grid-template-columns:1fr}}
#groupBar[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.homeCard,.qcard button{transition:none}}
#inviteBox[hidden]{display:none}
.cjHead{display:flex;gap:12px;align-items:flex-start;margin:6px 0 10px}.cjHead .curInfo{padding:0}
.curCover.cjCover{width:150px;border-radius:10px;font-size:30px}
.cjGets{list-style:none;padding:0;margin:4px 0 10px;display:flex;flex-direction:column;gap:4px;font-size:14px}
button.player.empty{border:1px dashed var(--line);cursor:pointer;font:inherit;width:100%}button.player.empty:hover{color:var(--text);border-color:var(--link)}
#cjGo,#csOk{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
@media (max-width:520px){.cjHead{flex-direction:column}.curCover.cjCover{width:100%}}
#topbar .tsep{width:1px;height:24px;background:var(--line);margin:0 6px;flex:none}
@media (max-width:700px){#topbar .tsep{margin:0 4px}#menuBtn{margin-right:2px}}
#topbar .menuSep{display:none}
@media (max-width:700px){#topbar .menuSep{display:block}}

/* Ajustes del grupo: secciones ordenadas */
dialog:has(.setForm){width:min(560px,94vw);max-height:92vh;overflow-y:auto}
.setSec{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.setSec h2{margin:0}.setSec h2+*{margin-top:0}.setSec .hint{margin:0}
.setSec .row.start,.row.start{justify-content:flex-start}
.setSec textarea{width:100%;box-sizing:border-box;resize:vertical}
.setSec.dangerSec{border-color:#5b2330}
.setSec[hidden]{display:none}
#banList{list-style:none;margin:0;padding:0}
.pickList .pick .tag.good,.tag.good{color:#7ee2a0;border-color:#7ee2a0}
/* Icono del grupo en las tarjetas de Inicio */
.gicon.gmark{width:26px;height:26px;border-radius:8px;font-size:14px;flex:none;position:relative;margin-left:4px;overflow:visible;background-clip:padding-box}
.gmark .tbx svg,.gmark .tbx img{width:22px;height:22px}
.gmark .glock{position:absolute;right:-6px;bottom:-6px;font-size:11px}
#stuList h2{margin:6px 0 2px;font-size:14px;color:var(--dim)}
#stuResults .tag.good{margin-right:4px}
#stuResults button.danger{background:#5b2330;color:#ffd5db}
.homeCard{position:relative;padding-right:46px}
.homeHead .gicon.gmark{position:absolute;top:10px;right:10px;margin:0}
#rail>*{flex-shrink:0}

/* Novedades: tarjeta de conversación */
.homeItem.chat .homeCard{border-left:3px solid #b48cff}
/* Mis grupos */
#groups{flex:1;min-height:0;overflow-y:auto;padding:16px 20px}
.grpHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
#grpNew{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer}
#grpList{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:760px}
.grpRow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--text);cursor:pointer;font:inherit;position:relative;transition:transform .15s ease}
.grpRow:hover{transform:scale(1.015)}
.grpRow.unread{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.grpRow .gicon{position:relative;overflow:visible}.grpRow .glock{position:absolute;right:-6px;bottom:-6px;font-size:12px}
.grpTxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.grpTop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.grpTop .dim{color:var(--dim);font-size:12px}.grpTop .time{margin-left:auto;color:var(--dim);font-size:12px}
.grpLast{color:var(--dim);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grpRow .badge{position:static;flex:none}
@media (max-width:700px){#groups{padding:12px}}
@media (prefers-reduced-motion:reduce){.grpRow{transition:none}}
#menuBtn{position:relative}
.qstatus.sin_solucion{color:#ff9a9a;border-color:#8a3a3a;background:rgba(200,60,60,.12)}
.qcard.st-resuelta>button{border-left:3px solid #2f7a4b}.qcard.st-sin_solucion>button{border-left:3px solid #8a3a3a;opacity:.85}
.qArchived{margin:8px 0;padding:8px 12px;border-radius:10px;background:rgba(200,60,60,.1);border-left:3px solid #8a3a3a;font-size:14px}
.qstatus.abierta{color:#8be3ff;border-color:#2a8db3;background:rgba(56,189,248,.14)}
.qcard.st-abierta>button{border-left:3px solid #38bdf8}

/* Notificaciones: más aire, separadas y legibles */
dialog:has(#notifList){width:min(480px,94vw)}
#notifList{max-height:65vh;display:flex;flex-direction:column;gap:6px;padding-right:4px}
#notifList li{border-radius:10px;background:var(--bg);border:1px solid var(--line)}
#notifList li.new{box-shadow:none;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
#notifList .notif{padding:10px 12px;gap:12px}
#notifList .notif .avatar{width:34px;height:34px;flex:none}
#notifList .txt{display:flex;flex-direction:column;gap:4px;line-height:1.35}
.nLine{font-size:14px}
.nTimes{margin-left:6px;font-size:12px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:8px;padding:0 6px}
.nSnip{font-size:13px;color:var(--dim);border-left:2px solid var(--line);padding-left:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#notifList time{font-size:12px;color:var(--dim)}

/* Consultas: buscador arriba y filtros plegables */
#qTop{display:flex;gap:8px;align-items:center;margin-bottom:10px}
#qTop #qSearch{flex:1;min-width:0}
#qTop #qAsk{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;white-space:nowrap}
#qFilt{display:none;white-space:nowrap}
#qFilt.on{border:1px solid var(--accent);color:var(--accent)}
@media (max-width:700px){
  #qTop{flex-wrap:wrap}
  #qTop #qSearch{flex:1 1 100%}
  #qFilt{display:block;flex:1}#qTop #qAsk{flex:1}
  #qFilters{display:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px}
  #qFilters.open{display:block}
  #qFilters #qCat{display:none} /* en el celular las categorías se eligen con los botones */
  #qFilters #qBar{margin-bottom:0}#qFilters #qBar select{flex:1;min-width:0}
  #qChips{max-height:none}
}

/* Aviso para instalar BPT como app */
#installBar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
#installBar[hidden]{display:none}
#installBar img{width:40px;height:40px;border-radius:10px;flex:none}
.ibTxt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--dim)}.ibTxt b{color:var(--text);font-size:14px}
#ibGo{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer}
#ibNo{padding:6px 10px}
/* Con la app instalada en iPhone la barra superior respeta la muesca */
@media (display-mode: standalone){#topbar{padding-top:env(safe-area-inset-top);height:calc(48px + env(safe-area-inset-top))}}
@media (display-mode: standalone) and (max-width:700px){#rail{top:calc(48px + env(safe-area-inset-top))}}
#navAvatar .silhouette{width:38px;height:38px;border-radius:50%;display:grid;place-items:end center;background:var(--raised);overflow:hidden;transition:box-shadow .15s}
#navAvatar .silhouette svg{width:34px;height:34px;fill:var(--dim)}
#navAvatar:hover .silhouette,#navAvatar.on .silhouette{box-shadow:0 0 0 2px var(--link)}

/* Selector de temas (Mi cuenta) */
#themeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.themeOpt{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--raised)!important;color:var(--text)!important;border:2px solid transparent!important;border-radius:12px;padding:8px!important;font-weight:500!important;font-size:12px}
.themeOpt.on{border-color:var(--accent)!important}
.themeSw{position:relative;width:100%;height:46px;border-radius:8px;overflow:hidden;border:1px solid rgba(128,128,128,.35)}
.themeSw i{position:absolute;left:6px;top:6px;bottom:6px;width:38%;border-radius:4px}
.themeSw b{position:absolute;right:6px;top:8px;width:30%;height:10px;border-radius:5px}
.themeSw u{position:absolute;right:6px;bottom:9px;width:40%;height:5px;border-radius:3px;opacity:.7}
dialog:has(#themeGrid){width:min(520px,94vw);max-height:92vh;overflow-y:auto}
/* Temas claros: ajustes de colores fijos pensados para fondo oscuro */
html.light #messages li:hover{background:rgba(0,0,0,.04)}
html.light dialog::backdrop{background:rgba(20,24,32,.45)}
html.light .qstatus.resuelta{color:#1d7a45;border-color:#7cc49b;background:rgba(46,160,90,.1)}
html.light .qstatus.sin_solucion{color:#b3261e;border-color:#e3a19c;background:rgba(200,60,60,.08)}
html.light .qstatus.abierta{color:#0a6c8a;border-color:#8fd0e3;background:rgba(56,189,248,.1)}
html.light .tag.good,html.light .pickList .pick .tag.good{color:#1d7a45;border-color:#7cc49b}
html.light .homeItem.solved .homeCard{border-left-color:#2e9e5e}
html.light .curActs button.danger,html.light dialog button.danger,html.light #stuResults button.danger{background:#fde2e4;color:#9b1c2c}
html.light .qArchived{background:rgba(200,60,60,.07)}
html.light .curBanner{background:var(--raised)}

/* ---- Pulsos ---- */
.pbg-turquesa{background:linear-gradient(135deg,#0e8fa8,#16b9d4)}.pbg-rojo{background:linear-gradient(135deg,#c0283a,#ff4757)}
.pbg-ambar{background:linear-gradient(135deg,#d9820d,#f0b429)}.pbg-morado{background:linear-gradient(135deg,#5b3cc4,#8b7cff)}
.pbg-verde{background:linear-gradient(135deg,#17905a,#2fd08a)}.pbg-oscuro{background:linear-gradient(135deg,#0b1020,#26304f)}
#pulses{flex:1;min-height:0;overflow-y:auto;padding:16px 20px}
#topPulse.fresh>span:first-child{animation:latido 1.4s ease-in-out infinite;display:inline-block}
@keyframes latido{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){#topPulse.fresh>span:first-child{animation:none}}
#pulseNewBtn{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer;white-space:nowrap}
.pRing{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;color:var(--text);cursor:pointer;font:inherit;flex:none;width:84px}
.pFace{padding:3px;border-radius:50%;background:var(--line)}
.pRing.fresh .pFace{background:conic-gradient(#ff4757,#f0b429,#16b9d4,#8b7cff,#ff4757)}
.pFace .avatar{width:66px;height:66px;font-size:24px;border:3px solid var(--bg)}
.pName{font-size:13px;font-weight:600;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pLeft{font-size:11px;color:var(--dim)}
.pGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:8px 0 18px}
.pItem{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}
.pItem .row button:not(.ghost){background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:6px 12px;font-weight:600;cursor:pointer}
.pThumb{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:10px}
.pThumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pThumb p{position:relative;margin:0;font-weight:700;font-size:14px;text-shadow:0 1px 4px rgba(0,0,0,.5);overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.pThumb img+p{align-self:flex-end;background:rgba(0,0,0,.45);border-radius:8px;padding:4px 6px;font-size:12px;font-weight:500}
/* Crear */
.pnPreview{position:relative;height:200px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:14px}
.pnPreview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.pnPreview p{position:relative;margin:0;font-size:20px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.4);overflow-wrap:anywhere}
.pnPreview.img p{align-self:flex-end;font-size:14px;font-weight:500;background:rgba(0,0,0,.5);border-radius:8px;padding:6px 10px}
.pnColors{display:flex;gap:8px}.pnSw{width:32px;height:32px;border-radius:50%!important;padding:0!important;border:2px solid transparent!important}
.pnSw.on{border-color:var(--text)!important;box-shadow:0 0 0 2px var(--bg)}
/* Visor */
#pulseView{padding:0;border:0;background:#000;width:min(440px,100vw);height:min(92vh,800px);max-width:100vw;max-height:100dvh;border-radius:16px;overflow:hidden}
#pulseView::backdrop{background:rgba(0,0,0,.85)}
.pvBox{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
.pvBars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.pvBars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.pvBars span i{display:block;height:100%;width:0;background:#fff}.pvBars span.done i{width:100%}
.pvBars span.run i{animation:pvRun 7s linear forwards}@keyframes pvRun{to{width:100%}}
.pvHead{position:absolute;top:20px;left:10px;right:10px;display:flex;align-items:center;gap:8px;z-index:4;color:#fff}
.pvHead .avatar{width:34px;height:34px;font-size:14px}.pvLeft{font-size:12px;opacity:.8}
.pvIcon{background:rgba(0,0,0,.35)!important;color:#fff!important;border:0;border-radius:50%!important;width:36px;height:36px;padding:0!important;cursor:pointer;font-size:16px}
.pvStage{flex:1;display:flex;align-items:center;justify-content:center;padding:70px 24px 40px;color:#fff;text-align:center}
.pvStage.img{padding:0;background:#000}.pvStage img{width:100%;height:100%;object-fit:contain}
.pvText{margin:0;font-size:26px;font-weight:800;line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,.35);overflow-wrap:anywhere}
.pvCap{position:absolute;left:14px;right:14px;bottom:24px;margin:0;background:rgba(0,0,0,.55);border-radius:10px;padding:10px 12px;font-size:16px;z-index:2}
.pvNav{position:absolute;top:70px;bottom:0;width:35%;background:none!important;border:0;z-index:1;cursor:pointer}.pvNav.prev{left:0}.pvNav.next{right:0;width:65%}
@media (max-width:700px){#pulses{padding:12px}#pulseView{width:100vw;height:100dvh;border-radius:0}}
html.light .pFace .avatar{border-color:var(--bg)}
#pvWho{display:flex;align-items:center;gap:8px;min-width:0}#pvWho b{font-size:15px}.pvLeft{white-space:nowrap}
.pLeft{white-space:nowrap}
.pvHead .grow{flex:1}

/* Tira de pulsos al estilo de las historias de Facebook */
.pGridBar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.pGridBar .hint{margin:0}.pGridBar button[hidden]{display:none}
.pGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;padding:2px 0 14px}
.pGrid .pCard{width:100%;min-width:0}
.homeItem.pulse .homeCard{border-left:3px solid #ff4757}
.pHomeIco{font-size:18px;line-height:1}
.pFaces{display:flex;margin:10px 0 2px;padding-left:6px}
.pFace1{margin-left:-6px;padding:2px;border-radius:50%;background:var(--line)}
.pFace1.fresh{background:conic-gradient(#ff4757,#f0b429,#16b9d4,#8b7cff,#ff4757)}
.pFace1 .avatar{width:34px;height:34px;font-size:13px;border:2px solid var(--panel,var(--raised))}
#homePulses{margin-bottom:6px}
.pCard{position:relative;flex:none;width:112px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--raised);color:#fff;font:inherit;scroll-snap-align:start;transition:transform .15s ease}
.pCard:hover{transform:scale(1.03)}
.pCard .pThumb{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;padding:28px 8px 26px}
.pCard .pThumb p{font-size:12px;-webkit-line-clamp:5}
.pCard .pThumb img+p{display:none}
.pCard::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 30%,transparent 65%,rgba(0,0,0,.6));pointer-events:none}
.pCard.seen{opacity:.6}
.pCardFace{position:absolute;top:6px;left:6px;z-index:2;padding:2px;border-radius:50%;background:rgba(255,255,255,.5)}
.pCardFace.fresh{background:conic-gradient(#ff4757,#f0b429,#16b9d4,#8b7cff,#ff4757)}
.pCardFace .avatar{width:30px;height:30px;font-size:12px;border:2px solid #000}
.pCardName{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;font-size:12px;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pAdd{background:var(--panel);border:1px solid var(--line);color:var(--text);display:flex;flex-direction:column;align-items:center}
.pAdd::after{display:none}
.pAddTop{flex:1;width:100%;display:grid;place-items:center;background:var(--raised)}
.pAddTop .avatar{width:56px;height:56px;font-size:22px}.pAddIco{font-size:34px}
.pPlus{margin-top:-16px;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:800;border:3px solid var(--panel);z-index:1}
.pAdd b{font-size:12px;padding:6px 4px 10px}
.pStripEmpty{grid-column:1/-1;margin:8px 0}
@media (prefers-reduced-motion:reduce){.pCard{transition:none}}

/* Aviso de versión nueva */
#updateBar{position:fixed;left:50%;transform:translateX(-50%);top:calc(56px + env(safe-area-inset-top));z-index:70;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:8px 10px 8px 14px;box-shadow:0 8px 24px rgba(0,0,0,.45);width:max-content;max-width:calc(100vw - 20px);font-size:14px;font-weight:600}
#updateBar[hidden]{display:none}
#updGo{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:7px 14px;font-weight:700;cursor:pointer}
#updNo{padding:6px 10px;font-size:13px}
#pulseOrder{background:var(--raised)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:8px;padding:7px 12px;font-weight:600}

/* Notificaciones al celular */
#pushBar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:61;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.45);max-width:520px;margin:0 auto}
#pushBar[hidden]{display:none}
.pbIco{font-size:26px;flex:none}
#pbGo{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer}
#pbNo{padding:6px 10px}
#pushBox .row{flex-wrap:wrap}
#pushPrefs .chk{display:flex;gap:8px;align-items:flex-start;margin:6px 0;font-size:14px;cursor:pointer}
#pushPrefs .chk input{width:auto;margin-top:3px}
#codeForm[hidden],#authForm[hidden]{display:none}
#codeError{color:#ff8f8f;margin:0;min-height:1.5em}
#pushBox .row{justify-content:flex-start}