/* Issue #86: barra de 4 secciones, pestañas y paleta Ir a… */
.barra{flex-wrap:nowrap;gap:16px;position:relative}
.marca{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-dsp);white-space:nowrap}
.marca-logo{display:inline-flex;align-items:center;width:56px;height:46px}
.barra{align-items:center;min-height:68px}
.secciones{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;margin-right:auto;min-width:0}
.barra .secciones a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;color:var(--suave);font-weight:500;text-decoration:none;white-space:nowrap}
.barra .secciones a:hover{background:var(--hover);color:var(--texto)}
.barra .secciones a[aria-current]{color:var(--texto);background:var(--nav-on);font-weight:600;text-decoration:none}
.contador{margin-left:6px;min-width:18px;padding:0 5px;border-radius:9px;background:var(--aviso);color:#fff;font-size:.7rem;line-height:18px;text-align:center;display:inline-block}
.barra-der{display:flex;flex-wrap:nowrap;gap:10px;align-items:center;flex:none}
.ir-a-txt{white-space:nowrap}
.ir-a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--borde);border-radius:10px;background:var(--hov);color:var(--suave);font:inherit;cursor:pointer}
.ir-a kbd{padding:1px 6px;border:1px solid var(--borde);border-radius:5px;font:.75rem var(--f-mono)}
.btn-nueva{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;background:var(--acento);color:var(--acento-txt);font-weight:600;text-decoration:none;white-space:nowrap}
.avatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:var(--hov);color:var(--texto);font:600 1rem var(--f-dsp);cursor:pointer}
.pestanas{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--borde);overflow-x:auto;scrollbar-width:none}
.pestanas a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--suave);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.pestanas a:hover{color:var(--texto)}
.pestanas a[aria-current]{color:var(--texto);font-weight:600;border-bottom-color:var(--acento)}
dialog.paleta{width:min(560px,calc(100vw - 24px));margin-top:12vh;padding:12px}
#paleta-q{width:100%;box-sizing:border-box;min-height:44px;font-size:1rem}
#paleta-lista{list-style:none;margin:8px 0 0;padding:0;max-height:50vh;overflow:auto}
#paleta-lista li{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;cursor:pointer}
#paleta-lista li[aria-selected=true]{background:var(--nav-on)}
#paleta-lista small{color:var(--suave);white-space:nowrap}
@media (max-width:1280px){.ir-a-txt,.ir-a kbd{display:none}.ir-a{padding:0 12px}}
@media (max-width:900px){
  .marca-logo{width:44px;height:36px}
  .barra .secciones,.btn-nueva,.ir-a kbd,.ir-a-txt{display:none}
  .ir-a .yarbi{margin:0}.ir-a:has(.yarbi)::before{content:none}
  .barra{justify-content:space-between}
  .barra-der{margin-left:auto}
  .ir-a{padding:0;width:44px;justify-content:center}
  .ir-a::before{content:"⌕";font-size:1.3rem}
  .pestanas{padding:0 8px}
}
/* Barra y pestañas alineadas con el borde del contenido (1200 px) en pantallas grandes */
.barra,.pestanas{padding-inline:max(16px,calc((100% - 1200px) / 2 + 16px))}
body:has(.contenido .tabla-tareas) .barra,body:has(.contenido .tabla-tareas) .pestanas{padding-inline:16px}
.btn-yarbi{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--sbd);background:var(--sb);color:var(--cy);font:italic 800 .95em 'Exo 2',var(--f-dsp);text-decoration:none;letter-spacing:.02em}
.btn-yarbi:hover{background:var(--nav-on)}