/* Paineis laterais de vidro, alca de redimensionar, abas do painel direito e os trilhos recolhidos. */

.painel{position:absolute;top:12px;bottom:12px;border-radius:var(--rlg);padding:14px;z-index:5;
        display:flex;flex-direction:column;background:hsl(var(--vidroPRaw)/var(--opq));
        backdrop-filter:blur(var(--vidro)) saturate(1.15);-webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
        box-shadow:var(--vidroSombra)}
.painel.esq{left:12px;width:268px}
.painel.dir{right:12px;width:var(--dirw,292px);padding:10px}
/* alca de redimensionar: borda esquerda do painel direito */
.resDir{position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:col-resize;z-index:7;
        border-radius:4px}
.resDir:hover,.resDir.arrastando{background:hsl(var(--acRaw)/.25)}
body.redimensionando{cursor:col-resize;user-select:none}
.cabpainel{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex:none}

/* painel direito: abas segmentadas + corpo */
.segbar{display:flex;align-items:center;gap:4px;flex:none;margin-bottom:8px}
.seg{flex:1;display:flex;padding:2px;border-radius:var(--r);background:var(--sup2)}
.seg button{flex:1;border:0;background:transparent;color:var(--tx2);font-size:12px;font-weight:500;
            padding:5px 0;border-radius:6px;gap:5px}
.seg button:hover{background:var(--sup2);color:var(--tx)}
.seg button.at{background:hsl(var(--acRaw)/.18);color:var(--ac2)}
.corpoDir{flex:1;min-height:0;display:flex;flex-direction:column}
/* dentro da coluna, os blocos nao devem esticar na vertical */
.corpoDir .seg,.corpoDir .row,.corpoDir .cabpainel{flex:none}
.corpoDir.rolavel{overflow-y:auto;padding-right:2px}
.railDir{position:absolute;right:12px;top:12px;bottom:12px;width:52px;z-index:5;
         display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;
         border-radius:var(--rlg);background:hsl(var(--vidroPRaw)/var(--opq));
         backdrop-filter:blur(var(--vidro)) saturate(1.15);-webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
         box-shadow:var(--vidroSombra)}
.railDir .icobtn{width:32px;height:32px}
.raildot{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--ac)}

/* trilho da esquerda (lista recolhida): mantem presenca e controles a mao */
.railEsq{position:absolute;left:12px;top:12px;bottom:12px;width:56px;z-index:5;
         display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;
         border-radius:var(--rlg);background:hsl(var(--vidroPRaw)/var(--opq));
         backdrop-filter:blur(var(--vidro)) saturate(1.15);-webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
         box-shadow:var(--vidroSombra)}
.railGente{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
           align-items:center;gap:8px;width:100%;padding:2px 0}
.railGente .rav{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
                font-weight:600;font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);
                background:color-mix(in srgb,var(--cor) 55%,var(--avBase));
                box-shadow:0 0 0 0 var(--cor);transition:box-shadow .08s linear;cursor:default}
.railGente .rav.falando{box-shadow:0 0 0 2px var(--cor)}
.railGente .rav.calado{opacity:.45}
.railFim{display:flex;flex-direction:column;align-items:center;gap:4px}